@charset "UTF-8";@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-cyrillic.C5lxZ8CY.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-greek-ext.CqjqNYQ-.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-greek.BBVDIX6e.woff2) format("woff2");
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-vietnamese.BjW4sHH5.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-latin-ext.4ZJIpNVo.woff2) format("woff2");
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-roman-latin.Di8DUHzh.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-cyrillic-ext.r48I6akx.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-cyrillic.By2_1cv3.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-greek-ext.1u6EdAuj.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-greek.DJ8dCoTZ.woff2) format("woff2");
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-vietnamese.BSbpV94h.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-latin-ext.CN1xVJS-.woff2) format("woff2");
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/inter-italic-latin.C2AdPX0b.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 400;
    src: local("PingFang SC Regular"),local("Noto Sans CJK SC"),local("Microsoft YaHei");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 500;
    src: local("PingFang SC Medium"),local("Noto Sans CJK SC"),local("Microsoft YaHei");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 600;
    src: local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 700;
    src: local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

html {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent
}

html:hover {
    scrollbar-color: var(--devui-line, #d7d8da) transparent
}

body[ui-theme=galaxy-theme] #content-slider-tabs {
    --devui-base-bg: #3f3f3f
}

body[ui-theme=galaxy-theme] #content-slider-tabs ul,body[ui-theme=galaxy-theme] #icon-container {
    background-color: #1a1a1c99!important
}

body {
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

button.copy {
    display: none
}

.title[data-v-fb21a8fb] {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.5;
    color: #302e51
}

.title[data-v-fb21a8fb]:before {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleLeft.svg)
}

.title[data-v-fb21a8fb]:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleRight.svg)
}

.title-desc[data-v-fb21a8fb] {
    margin-top: 8px;
    max-width: 60%;
    font-size: 16px;
    text-align: center;
    color: var(--devui-aide-text, #71757f)
}

@media (max-width: 1600px) {
    .title[data-v-fb21a8fb] {
        font-size:38px
    }
}

@media (max-width: 768px) {
    .title[data-v-fb21a8fb] {
        font-size:25px
    }

    .title-desc[data-v-fb21a8fb] {
        font-size: 12px;
        max-width: 80%
    }
}

.gradual-container[data-v-fb21a8fb] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.gradual-video[data-v-fb21a8fb] {
    margin-top: 80px;
    margin-bottom: 42px;
    padding-bottom: 98px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background: no-repeat url(/png/home/gradual/videoBg.svg);
    background-size: contain;
    background-position: center 100px
}

.gradual-video video[data-v-fb21a8fb] {
    position: relative;
    width: 40%;
    border-radius: 10px;
    transition: all .3s ease
}

.gradual-video .top[data-v-fb21a8fb] {
    z-index: 2;
    transform: translate(20%)
}

.gradual-video .top[data-v-fb21a8fb]:hover {
    transform: translate(20%) scale(1.1)
}

.gradual-video .bottom[data-v-fb21a8fb] {
    z-index: 1;
    transform: translate(-20%)
}

.gradual-video .bottom[data-v-fb21a8fb]:hover {
    z-index: 3;
    transform: translate(-20%) scale(1.1)
}

@media (max-width: 1600px) {
    .gradual-video[data-v-fb21a8fb] {
        margin:56px 0 0;
        padding-bottom: 56px;
        background-position: center 50px
    }
}

@media (max-width: 768px) {
    .gradual-video[data-v-fb21a8fb] {
        background-size:80%;
        background-position: center 10px
    }
}

.title[data-v-486e45b4] {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.5;
    color: #302e51
}

.title[data-v-486e45b4]:before {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleLeft.svg)
}

.title[data-v-486e45b4]:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleRight.svg)
}

.title-desc[data-v-486e45b4] {
    margin-top: 8px;
    max-width: 60%;
    font-size: 16px;
    text-align: center;
    color: var(--devui-aide-text, #71757f)
}

@media (max-width: 1600px) {
    .title[data-v-486e45b4] {
        font-size:38px
    }
}

@media (max-width: 768px) {
    .title[data-v-486e45b4] {
        font-size:25px
    }

    .title-desc[data-v-486e45b4] {
        font-size: 12px;
        max-width: 80%
    }
}

.interact-container[data-v-486e45b4] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.content[data-v-486e45b4] {
    margin: 98px 0 140px;
    width: 80%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 25px;
    transform: translate(6%)
}

.steps[data-v-486e45b4] {
    display: flex
}

.steps ul[data-v-486e45b4],.steps li[data-v-486e45b4] {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}

.steps .line[data-v-486e45b4] {
    position: absolute;
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
    background-color: #dfe0f4;
    transition: all .8s linear
}

.steps .row[data-v-486e45b4] {
    display: flex;
    align-items: center;
    gap: 42px;
    font-size: 28px
}

.steps .row .dot[data-v-486e45b4] {
    width: 16px;
    height: 16px;
    background-color: #dfe0f4;
    border-radius: 50%;
    transition: all .8s linear
}

.steps .row .label[data-v-486e45b4] {
    cursor: pointer
}

.steps .row .active-label[data-v-486e45b4] {
    font-size: 30px;
    font-weight: 700
}

.steps .row .active-label span[data-v-486e45b4] {
    color: var(--devui-link, #526ecc)
}

.steps .desc[data-v-486e45b4] {
    padding: 12px 0 32px 58px;
    font-size: 16px;
    color: var(--devui-aide-text, #71757f)
}

.steps .active[data-v-486e45b4] {
    opacity: 0
}

.steps li:last-child>.line[data-v-486e45b4] {
    height: 30px
}

.steps .cartoon-line[data-v-486e45b4] {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 20px;
    left: 4px;
    background: no-repeat center/cover url(/png/home/interLine.svg);
    transition: all .8s linear
}

.steps .cartoon-dot[data-v-486e45b4] {
    position: absolute;
    z-index: 2;
    width: 98px;
    height: 98px;
    background: no-repeat center/cover url(/png/home/interact/dot.svg);
    transform: translate(-44px) translateY(-12px);
    transition: all .8s linear
}

.trial-btn[data-v-486e45b4] {
    display: flex;
    gap: 4px;
    width: fit-content;
    padding: 15px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg,#b369ff,#7b79ff);
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease-in-out;
    color: var(--devui-light-text, #ffffff);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer
}

.trial-btn[data-v-486e45b4]:hover {
    transform: scale(1.05)
}

.demo[data-v-486e45b4] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.demo img[data-v-486e45b4] {
    width: 36%;
    object-fit: contain;
    transition: all .3s linear
}

.demo .left[data-v-486e45b4] {
    position: absolute;
    z-index: 1;
    transform: translate(-30%) translateY(70%)
}

.demo .center[data-v-486e45b4] {
    z-index: 3
}

.demo .right[data-v-486e45b4] {
    position: absolute;
    z-index: 2;
    transform: translate(30%) translateY(-30%)
}

.steps-h[data-v-486e45b4] {
    display: none;
    width: 90%
}

.steps-h ul[data-v-486e45b4],.steps-h li[data-v-486e45b4] {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}

.steps-h ul[data-v-486e45b4] {
    display: flex;
    padding: 0 2em;
    margin-bottom: 56px
}

.steps-h .line-h[data-v-486e45b4] {
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #dfe0f4;
    transition: all .8s linear
}

.steps-h .row-h[data-v-486e45b4] {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
    gap: 14px;
    font-size: 14px
}

.steps-h .row-h .dot-h[data-v-486e45b4] {
    width: 16px;
    height: 16px;
    background-color: #dfe0f4;
    border-radius: 50%;
    transition: all .8s linear
}

.steps-h .row-h .label-h[data-v-486e45b4] {
    cursor: pointer
}

.steps-h .row-h .label-h.unactivated-label[data-v-486e45b4] {
    color: var(--devui-aide-text, #71757f)
}

.steps-h .active[data-v-486e45b4] {
    opacity: 0
}

.steps-h .cartoon-line-h[data-v-486e45b4] {
    position: absolute;
    top: 8px;
    z-index: 1;
    width: 8px;
    height: 20px;
    transform-origin: top;
    transform: rotate(-90deg);
    background: no-repeat center/cover url(/png/home/interLine.svg);
    transition: all .8s linear
}

.steps-h .cartoon-dot-h[data-v-486e45b4] {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    background: no-repeat center/cover url(/logo.svg);
    transform: translateY(-12px);
    transition: all .8s linear
}

.btn-h[data-v-486e45b4] {
    display: none
}

@media (max-width: 1600px) {
    .content[data-v-486e45b4] {
        margin:56px 0 78px
    }

    .steps[data-v-486e45b4] {
        display: block
    }

    .steps .row[data-v-486e45b4] {
        font-size: 18px
    }

    .steps .desc[data-v-486e45b4] {
        font-size: 12px;
        padding: 8px 0 20px 58px
    }

    li:last-child .line[data-v-486e45b4] {
        height: 18px
    }
}

@media (max-width: 768px) {
    .content[data-v-486e45b4] {
        flex-direction:column;
        align-items: center;
        margin: 56px 0 78px;
        transform: translate(0)
    }

    .steps[data-v-486e45b4] {
        display: none
    }

    .steps-h[data-v-486e45b4] {
        display: flex;
        justify-content: center
    }

    .btn-h[data-v-486e45b4] {
        display: block
    }

    .trial-btn[data-v-486e45b4] {
        padding: 10px 15px;
        font-size: 14px;
        align-items: center
    }
}

.title[data-v-8dc1d81a] {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.5;
    color: #302e51
}

.title[data-v-8dc1d81a]:before {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleLeft.svg)
}

.title[data-v-8dc1d81a]:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleRight.svg)
}

.title-desc[data-v-8dc1d81a] {
    margin-top: 8px;
    max-width: 60%;
    font-size: 16px;
    text-align: center;
    color: var(--devui-aide-text, #71757f)
}

@media (max-width: 1600px) {
    .title[data-v-8dc1d81a] {
        font-size:38px
    }
}

@media (max-width: 768px) {
    .title[data-v-8dc1d81a] {
        font-size:25px
    }

    .title-desc[data-v-8dc1d81a] {
        font-size: 12px;
        max-width: 80%
    }
}

.ai-container[data-v-8dc1d81a] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.banner[data-v-8dc1d81a] {
    margin: 80px 0 56px;
    width: 60%;
    display: flex;
    justify-content: center;
    gap: 24px
}

.banner .scene[data-v-8dc1d81a] {
    flex: 1;
    max-width: 382px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border-radius: 24px;
    background: no-repeat center/cover url(/png/home/aiDefault.png),#fffc;
    color: #43406d;
    cursor: pointer
}

.banner .scene.active[data-v-8dc1d81a] {
    color: #fffc;
    background: no-repeat center/cover url(/png/home/aiDefault.png),linear-gradient(to right,#f157ff,#7b79ff)
}

.banner .scene.active .desc[data-v-8dc1d81a] {
    color: #fffc
}

.banner .scene .label[data-v-8dc1d81a] {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5
}

.banner .scene .desc[data-v-8dc1d81a] {
    font-size: 16px;
    color: var(--devui-aide-text, #71757f)
}

.content[data-v-8dc1d81a] {
    width: 80%;
    display: flex;
    justify-content: center;
    background: no-repeat url(/png/home/ai/contentBg.svg);
    background-size: 100%;
    background-position: center;
    padding-bottom: 140px
}

.content img[data-v-8dc1d81a] {
    width: 90%;
    object-fit: contain
}

@media (max-width: 1600px) {
    .banner[data-v-8dc1d81a] {
        margin:56px 0 30px
    }

    .banner .scene[data-v-8dc1d81a] {
        padding: 15px;
        border-radius: 12px
    }

    .banner .scene .label[data-v-8dc1d81a] {
        font-size: 18px
    }

    .banner .scene .desc[data-v-8dc1d81a] {
        font-size: 11px
    }

    .content[data-v-8dc1d81a] {
        padding-bottom: 56px
    }
}

@media (max-width: 768px) {
    .banner[data-v-8dc1d81a] {
        width:80%;
        margin: 56px 0 30px
    }

    .banner .scene .label[data-v-8dc1d81a] {
        font-size: 12px;
        text-align: center;
        margin-bottom: 0
    }

    .banner .scene .desc[data-v-8dc1d81a] {
        display: none
    }
}

.title[data-v-f6cfa675] {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.5;
    color: #302e51
}

.title[data-v-f6cfa675]:before {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleLeft.svg)
}

.title[data-v-f6cfa675]:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleRight.svg)
}

.title-desc[data-v-f6cfa675] {
    margin-top: 8px;
    max-width: 60%;
    font-size: 16px;
    text-align: center;
    color: var(--devui-aide-text, #71757f)
}

@media (max-width: 1600px) {
    .title[data-v-f6cfa675] {
        font-size:38px
    }
}

@media (max-width: 768px) {
    .title[data-v-f6cfa675] {
        font-size:25px
    }

    .title-desc[data-v-f6cfa675] {
        font-size: 12px;
        max-width: 80%
    }
}

.typical-container[data-v-f6cfa675] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.main[data-v-f6cfa675] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: contain;
    background-position: right
}

.content[data-v-f6cfa675] {
    width: 80%;
    margin: 80px 0 56px;
    margin-left: calc(5% - 2em);
    display: flex;
    flex-wrap: wrap;
    gap: 2em
}

.content .comp-card[data-v-f6cfa675] {
    width: 30%;
    aspect-ratio: 1/1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around
}

.content .comp-card .img-container[data-v-f6cfa675] {
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center
}

.content .comp-card .img-container a[data-v-f6cfa675] {
    width: 60%;
    max-height: 90%
}

.content .comp-card .img-container img[data-v-f6cfa675] {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all .5s ease-in-out;
    cursor: pointer
}

.content .comp-card .img-container img[data-v-f6cfa675]:hover {
    transform: scale(1.1)
}

.content .comp-card .bottom[data-v-f6cfa675] {
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10%;
    padding-bottom: 5%
}

.content .comp-card .bottom .label[data-v-f6cfa675] {
    font-size: 28px;
    font-weight: 700;
    color: #000c;
    margin-bottom: 8px
}

.content .comp-card .bottom .desc[data-v-f6cfa675] {
    font-size: 16px;
    color: var(--devui-aide-text, #71757f)
}

.bubble-bg[data-v-f6cfa675] {
    background: no-repeat center/cover url(/png/home/comp/bubbleBg.png);
    background-size: 100% 100%
}

.mention-bg[data-v-f6cfa675] {
    background: no-repeat center/cover url(/png/home/comp/mentionBg.png);
    background-size: 100% 100%
}

.input-bg[data-v-f6cfa675] {
    background: no-repeat center/cover url(/png/home/comp/inputBg.png);
    background-size: 100% 100%
}

.typical-btn[data-v-f6cfa675] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 56px
}

.typical-btn .btn[data-v-f6cfa675] {
    width: 252px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    border-radius: 84px;
    background: no-repeat center/contain url(/png/home/comp/btnBg.svg);
    color: #db6fe5;
    font-size: 30px;
    cursor: pointer;
    transition: all .5s ease-in-out
}

.typical-btn .btn[data-v-f6cfa675]:hover {
    transform: scale(1.05)
}

.typical-btn .btn .btn-text[data-v-f6cfa675] {
    background: linear-gradient(to right,#b369ff,#7b79ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width: 1600px) {
    .content[data-v-f6cfa675] {
        margin:56px 0;
        margin-left: calc(10% - 4em)
    }

    .content .comp-card .bottom .label[data-v-f6cfa675] {
        font-size: 18px
    }

    .content .comp-card .bottom .desc[data-v-f6cfa675] {
        font-size: 11px
    }

    .typical-btn .btn[data-v-f6cfa675] {
        width: 194px;
        height: 65px;
        line-height: 65px;
        border-radius: 65px;
        font-size: 25px
    }
}

@media (max-width: 768px) {
    .content .comp-card[data-v-f6cfa675] {
        width:45%
    }

    .content .comp-card .bottom .label[data-v-f6cfa675] {
        font-size: 12px;
        margin-bottom: 0
    }

    .content .comp-card .bottom .desc[data-v-f6cfa675] {
        display: none
    }

    .typical-btn .btn[data-v-f6cfa675] {
        width: 126px;
        height: 42px;
        line-height: 42px;
        border-radius: 42px;
        font-size: 16px
    }
}

.title[data-v-870d7d40] {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.5;
    color: #302e51
}

.title[data-v-870d7d40]:before {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleLeft.svg)
}

.title[data-v-870d7d40]:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 1.5em;
    height: 1em;
    background: no-repeat center/cover url(/png/home/titleRight.svg)
}

.title-desc[data-v-870d7d40] {
    margin-top: 8px;
    max-width: 60%;
    font-size: 16px;
    text-align: center;
    color: var(--devui-aide-text, #71757f)
}

@media (max-width: 1600px) {
    .title[data-v-870d7d40] {
        font-size:38px
    }
}

@media (max-width: 768px) {
    .title[data-v-870d7d40] {
        font-size:25px
    }

    .title-desc[data-v-870d7d40] {
        font-size: 12px;
        max-width: 80%
    }
}

.comp-container[data-v-870d7d40] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.content[data-v-870d7d40] {
    width: 80%;
    margin: 80px 0 160px;
    display: flex;
    align-items: center
}

.content .case[data-v-870d7d40] {
    max-width: min(30%,375px);
    margin-right: 30px
}

.content .case .label[data-v-870d7d40] {
    display: flex;
    align-items: center;
    font-size: 36px;
    margin-bottom: 32px
}

.content .case .label img[data-v-870d7d40] {
    margin-right: 8px;
    width: 1em;
    height: 1em
}

.content .case .desc[data-v-870d7d40] {
    font-size: 16px
}

.content .video-container[data-v-870d7d40] {
    flex: 1;
    width: 60%
}

.content .video-container video[data-v-870d7d40] {
    width: 100%;
    object-fit: contain;
    border-radius: 24px
}

@media (max-width: 1600px) {
    .content[data-v-870d7d40] {
        margin:56px 0
    }

    .content .case .label[data-v-870d7d40] {
        font-size: 24px;
        margin-bottom: 20px
    }

    .content .case .desc[data-v-870d7d40] {
        font-size: 11px
    }

    .content .video-container video[data-v-870d7d40] {
        border-radius: 12px
    }
}

@media (max-width: 768px) {
    .content[data-v-870d7d40] {
        flex-direction:column;
        margin: 40px 0 56px
    }

    .content .case[data-v-870d7d40] {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 30px
    }

    .content .case .label[data-v-870d7d40] {
        font-size: 16px;
        margin-bottom: 0
    }

    .content .case .desc[data-v-870d7d40] {
        display: none
    }

    .content .video-container[data-v-870d7d40] {
        width: 90%
    }
}

.related-container[data-v-79e843dc] {
    width: 100%;
    padding: 20px 60px;
    color: var(--devui-light-text, #ffffff);
    background: no-repeat center/cover url(/png/home/footerBg.png)
}

.related-container .title[data-v-79e843dc] {
    margin-bottom: 20px;
    font-size: 16px
}

.content[data-v-79e843dc] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 100px;
    font-size: 14px
}

.content .info-container[data-v-79e843dc] {
    position: relative;
    width: 120px
}

.content .info-container[data-v-79e843dc]:hover {
    cursor: pointer
}

.content .info[data-v-79e843dc] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto
}

.content .info img[data-v-79e843dc] {
    height: 1em;
    object-fit: contain
}

.content a[data-v-79e843dc]:hover {
    color: var(--devui-link-light, #96adfa)
}

.content .expand[data-v-79e843dc] {
    position: absolute;
    display: none;
    left: 0;
    bottom: 2em;
    width: 160px;
    border-radius: 8px;
    transform-origin: left bottom;
    transition: all .1s linear;
    transform: scale(2.5)
}

.content .expand.active[data-v-79e843dc] {
    display: block!important
}

@media (max-width: 1600px) {
    .content .expand[data-v-79e843dc] {
        border-radius:4px
    }
}

.enhance-icon[data-v-96ca16c2] {
    filter: brightness(10)
}

.header[data-v-96ca16c2] {
    position: fixed;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    width: 100%;
    height: 48px;
    background-color: var(--devui-base-bg, #ffffff);
    transition: .5s
}

.header img[data-v-96ca16c2] {
    height: 32px;
    margin: 8px;
    cursor: pointer
}

.header .mc-logo[data-v-96ca16c2] {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--devui-text, #252b3a)
}

.header .mc-logo img[data-v-96ca16c2] {
    margin: 8px 8px 8px 20px
}

.header .left-nav[data-v-96ca16c2] {
    display: flex;
    align-items: center
}

.header .left-nav button[data-v-96ca16c2] {
    display: none
}

.header .release[data-v-96ca16c2] {
    margin-right: 12px;
    color: var(--devui-icon-fill, #71757f);
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 32px
}

.header .release .version[data-v-96ca16c2] {
    line-height: 32px
}

.header .release[data-v-96ca16c2]:hover {
    color: var(--devui-text, #252b3a);
    transition: color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.header .theme[data-v-96ca16c2] {
    display: flex;
    margin: 0 16px
}

.header .theme .opt[data-v-96ca16c2] {
    padding: 5px;
    cursor: pointer;
    transition: .5s;
    border-radius: 25%
}

.header .theme .opt[data-v-96ca16c2]:hover {
    transform: scale(1.1);
    background-color: var(--devui-glass-morphism-bg, rgba(245, 246, 248, .9))
}

.intro-header[data-v-96ca16c2] {
    background-color: #fff0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.intro-header.scroll[data-v-96ca16c2] {
    transition: background-color 1s;
    background-color: #ffffff80
}

.intro-header.active[data-v-96ca16c2] {
    background-color: var(--devui-base-bg, #ffffff)
}

.right-nav[data-v-96ca16c2] {
    display: flex;
    align-items: center
}

.right-nav .nav-drop-btn[data-v-96ca16c2] {
    display: none
}

.right-nav .nav-list[data-v-96ca16c2] {
    gap: 12px;
    display: flex;
    margin-right: 12px
}

.right-nav .nav-list .nav-op[data-v-96ca16c2] {
    color: var(--devui-aide-text, #71757f);
    display: flex;
    align-items: center;
    padding-right: 8px
}

.right-nav .nav-list .nav-op[data-v-96ca16c2]:hover {
    color: var(--devui-text, #252b3a);
    background: var(--devui-icon-bg, #ffffff);
    transition: all var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    border-radius: var(--devui-border-radius-card, 6px)
}

.right-nav .nav-list .nav-op img[data-v-96ca16c2] {
    width: 16px;
    height: 16px
}

.right-nav .nav-list>a[data-v-96ca16c2] {
    text-decoration: none
}

.right-nav .nav-list .nav-active[data-v-96ca16c2] {
    color: var(--devui-text, #252b3a);
    background: var(--devui-icon-bg, #ffffff);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    border-radius: var(--devui-border-radius-card, 6px)
}

.right-nav .header-menu-splitter[data-v-96ca16c2] {
    height: 24px;
    border-left: 1px solid var(--devui-line, #d7d8da)
}

.right-nav .gitcode-address[data-v-96ca16c2] {
    margin: 0 20px 0 8px
}

.nav-drop-menu[data-v-96ca16c2] {
    display: flex;
    background-color: var(--devui-base-bg, #ffffff);
    width: 100vw;
    justify-content: center
}

.nav-drop-menu ul[data-v-96ca16c2] {
    padding: 12px
}

.nav-drop-menu li[data-v-96ca16c2],.nav-drop-menu a[data-v-96ca16c2] {
    height: 40px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.nav-drop-menu li span[data-v-96ca16c2],.nav-drop-menu a span[data-v-96ca16c2] {
    color: var(--devui-text, #252b3a)
}

.nav-drop-menu img[data-v-96ca16c2] {
    width: 16px;
    height: 16px
}

.nav-drop-menu .theme[data-v-96ca16c2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.list-menu[data-v-96ca16c2] {
    padding: 0;
    margin: 0 0 3px
}

.menu-item[data-v-96ca16c2] {
    padding: 5px 0 2px 8px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 768px) {
    .header img[data-v-96ca16c2] {
        margin:8px
    }

    .header .left-nav button[data-v-96ca16c2] {
        display: block;
        margin-right: -8px
    }

    .header .right-nav .nav-drop-btn[data-v-96ca16c2] {
        margin-right: 10px;
        display: block
    }

    .header .right-nav .nav-list[data-v-96ca16c2],.header .right-nav .theme[data-v-96ca16c2],.header .right-nav .release[data-v-96ca16c2],.header .right-nav .header-menu-splitter[data-v-96ca16c2],.header .right-nav .gitcode-address[data-v-96ca16c2] {
        display: none
    }
}

@media (max-width: 320px) {
    .nav-drop-menu[data-v-96ca16c2] {
        width:320px
    }
}

.header-right-nav-dropdown {
    left: 0!important;
    background: var(--devui-base-bg, #ffffff);
    display: flex;
    justify-self: center;
    box-shadow: 0 2px 0 0 var(--devui-shadow, rgba(37, 43, 58, .24))!important
}

.intro-header-right-nav-dropdown {
    left: 0!important;
    background: #fff0!important;
    display: flex;
    justify-self: center;
    box-shadow: none!important
}

.main-container[data-v-a96c3243] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px
}

.model[data-v-a96c3243] {
    position: relative;
    width: 65%;
    height: 60%
}

.model .scene-container[data-v-a96c3243] {
    width: 100%;
    height: 100%
}

.model .model-img[data-v-a96c3243],.model .model-text[data-v-a96c3243] {
    position: absolute;
    width: 120%;
    height: 120%;
    object-fit: contain
}

.model .model-text[data-v-a96c3243] {
    z-index: 2
}

.main-input[data-v-a96c3243] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 25px;
    background-color: #fffc;
    padding-left: 52px;
    background-image: url(/png/home/star.png);
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 4%;
    font-size: 22px;
    z-index: 2
}

.main-input .use-panel[data-v-a96c3243] {
    width: 11em;
    display: flex;
    align-items: baseline
}

.main-input .use[data-v-a96c3243] {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    animation: showText-a96c3243 1s steps(6) forwards
}

.main-input .use[data-v-a96c3243]:after {
    content: "";
    position: absolute;
    width: 2px;
    right: 0;
    height: 100%;
    animation: blink-a96c3243 .5s steps(2) infinite
}

.main-input .btn-send[data-v-a96c3243] {
    margin: 5px 5px 5px 150px;
    width: 88px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    text-align: center;
    background: linear-gradient(135deg,#b369ff,#7b79ff);
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease-in-out;
    color: var(--devui-light-text, #ffffff);
    cursor: pointer;
    font-size: 20px;
    text-indent: 1px
}

.main-input .btn-send[data-v-a96c3243]:hover {
    transform: scale(1.05)
}

.main-text .light-text[data-v-a96c3243] {
    color: var(--devui-link-active, #526ecc)
}

.btn-learn[data-v-a96c3243] {
    margin-top: 5vh;
    width: 252px;
    height: 84px;
    line-height: 84px;
    border-radius: 84px;
    text-align: center;
    background: linear-gradient(135deg,#b369ff,#7b79ff);
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease-in-out;
    color: var(--devui-light-text, #ffffff);
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2
}

.btn-learn[data-v-a96c3243]:hover {
    transform: scale(1.05);
    background: no-repeat center/cover url(/png/home/btnActive.png)
}

@keyframes showText-a96c3243 {
    0% {
        width: 0
    }

    to {
        width: 6.1em
    }
}

@keyframes blink-a96c3243 {
    0% {
        border-left: 2px solid transparent
    }

    to {
        border-left: 2px solid var(--devui-text, #252b3a)
    }
}

@keyframes rockText-a96c3243 {
    0% {
        transform: translate(0)
    }

    25% {
        transform: translate(-2px)
    }

    50% {
        transform: translate(0)
    }

    75% {
        transform: translate(2px)
    }

    to {
        transform: translate(0)
    }
}

@media (max-width: 1600px) {
    .model .text1[data-v-a96c3243],.model .text2[data-v-a96c3243],.model .text3[data-v-a96c3243] {
        transform:scale(.8)
    }

    .btn-learn[data-v-a96c3243] {
        width: 194px;
        height: 65px;
        line-height: 65px;
        font-size: 25px
    }
}

@media (max-width: 768px) {
    .model[data-v-a96c3243] {
        height:35%
    }

    .main-input[data-v-a96c3243] {
        padding-left: 38px;
        font-size: 14px
    }

    .main-input .btn-send[data-v-a96c3243] {
        margin-left: 50px;
        width: 44px;
        height: 26px;
        line-height: 26px;
        border-radius: 26px;
        font-size: 12px
    }

    .main-text[data-v-a96c3243] {
        font-size: 12px
    }

    .btn-learn[data-v-a96c3243] {
        width: 126px;
        height: 42px;
        line-height: 42px;
        font-size: 16px
    }
}

.home-container[data-v-5f9b1d82] {
    width: 100%;
    height: 100%;
    min-width: 375px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.loading[data-v-5f9b1d82] {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.main-container[data-v-5f9b1d82] {
    width: 100%;
    height: 100vh;
    background: no-repeat center/cover url(/png/home/bgHome.png)
}

.intro-container[data-v-5f9b1d82] {
    width: 100%;
    height: 100%;
    background: no-repeat center/cover url(/png/home/introBg.png)
}

.intro-container .gradual-c0ntainer[data-v-5f9b1d82],.intro-container .interact-container[data-v-5f9b1d82],.intro-container .ai-container[data-v-5f9b1d82],.intro-container .typical-container[data-v-5f9b1d82] {
    width: 100%
}

.demo-container[data-v-5f9b1d82] {
    width: 100%;
    height: 100%;
    padding-top: 84px;
    background: no-repeat center/cover url(/png/home/demoBg.png)
}

.demo-container .comp-container[data-v-5f9b1d82],.demo-container .eco-container[data-v-5f9b1d82],.footer-container[data-v-5f9b1d82] {
    width: 100%
}

@media (max-width: 768px) {
    .main-container[data-v-5f9b1d82] {
        height:auto;
        aspect-ratio: 1/1.5
    }

    .demo-container[data-v-5f9b1d82] {
        padding-top: 56px
    }
}

.collapse-title[data-v-98d255a3] {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    padding-left: 12px;
    padding-right: 28px;
    line-height: 40px;
    color: var(--devui-text-weak, #575d6c);
    border-radius: var(--devui-border-radius, 2px);
    font-size: var(--devui-font-size, 12px);
    font-weight: 600;
    box-sizing: border-box;
    transition: font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    cursor: pointer
}

.collapse-title[data-v-98d255a3]:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.collapse-icon[data-v-98d255a3] {
    position: absolute;
    top: 12px;
    right: 10px;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.collapse-icon[data-v-98d255a3] g path {
    fill: var(--devui-icon-fill, #71757f)
}

.collapse-icon.expanded[data-v-98d255a3] {
    transform: none
}

.collapse-content[data-v-98d255a3] {
    line-height: 1.5;
    color: var(--devui-text-weak, #575d6c)
}

.collapse-transition-enter-from[data-v-98d255a3],.collapse-transition-leave-to[data-v-98d255a3] {
    opacity: 0
}

.collapse-transition-enter-to[data-v-98d255a3],.collapse-transition-leave-from[data-v-98d255a3] {
    opacity: 1
}

.collapse-transition-enter-active[data-v-98d255a3],.collapse-transition-leave-active[data-v-98d255a3] {
    transition: max-height .3s cubic-bezier(.5,.05,.5,.95),opacity .3s cubic-bezier(.5,.05,.5,.95)
}

.side-menu-container[data-v-278adf39] {
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3);
    width: 302px;
    height: 100vh;
    position: fixed;
    z-index: 10;
    top: 48px;
    background: var(--devui-base-bg, #ffffff);
    padding: 16px 8px
}

.side-menu-container[data-v-278adf39] .collapse-container:not(:first-child) {
    margin-top: 8px
}

.menu-item[data-v-278adf39] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    margin-top: 8px;
    line-height: 40px;
    color: var(--devui-text-weak, #575d6c);
    border-radius: var(--devui-border-radius, 2px);
    font-size: var(--devui-font-size, 12px);
    font-weight: 400;
    box-sizing: border-box;
    transition: font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    cursor: pointer
}

.menu-item.full-radios[data-v-278adf39] {
    border-radius: var(--devui-border-radius-full, 100px)
}

.menu-item.menu-item-active[data-v-278adf39] {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    font-weight: 700
}

.menu-item[data-v-278adf39]:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.menu-list .menu-item[data-v-278adf39] {
    padding-left: 22px
}

.page-nav-link[data-v-fa23ce10] {
    list-style: none;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    font-size: 12px;
    color: var(--devui-text, #252b3a);
    border-radius: 100px;
    cursor: pointer
}

.page-nav-link.active[data-v-fa23ce10] {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    font-weight: 600
}

.page-nav-link[data-v-fa23ce10]:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.slider-container[data-v-d8bbca9e] {
    width: 100%;
    height: 176px;
    position: relative
}

.banner-container[data-v-d8bbca9e] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px
}

.banner-container img[data-v-d8bbca9e] {
    width: 100%;
    height: 100%
}

.icon-container[data-v-d8bbca9e] {
    position: absolute;
    top: -90px;
    right: 24px;
    width: 160px;
    height: 160px;
    background-color: #fff3;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 20px
}

.tabs[data-v-d8bbca9e] {
    width: 100%;
    position: absolute;
    bottom: -30px;
    border-radius: 0 0 20px 20px
}

.tabs[data-v-d8bbca9e] ul {
    width: 100%;
    background: #f2f2f399;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 0 0 20px 20px
}

.tabs[data-v-d8bbca9e] li {
    flex: 1;
    height: 56px;
    line-height: 56px;
    border-radius: 0 0 20px 20px;
    margin: 0
}

.tabs[data-v-d8bbca9e] .devui-tabs__nav-content a {
    display: inline-block;
    text-align: center;
    padding: 0 16px;
    height: 100%;
    width: 100%;
    line-height: 56px
}

.tabs[data-v-d8bbca9e] .devui-tabs__nav-slider-animation {
    width: 50%!important;
    left: 0!important;
    height: 56px;
    border-radius: 0 0 20px 20px;
    box-shadow: 2px 2px 16px var(--devui-shadow, rgba(37, 43, 58, .24))!important;
    background-color: var(--devui-base-bg, #ffffff)
}

.tabs.tab-current[data-v-d8bbca9e] .devui-tabs__nav-slider-animation {
    left: 50.1%!important
}

.tabs[data-v-d8bbca9e] .devui-tabs__nav {
    overflow-y: unset!important;
    overflow-x: unset!important
}

.fix-tab[data-v-d8bbca9e] {
    width: 100%;
    position: fixed;
    top: 46px;
    height: 56px;
    z-index: 1000
}

.fix-tab[data-v-d8bbca9e] .devui-tabs__nav-slider-animation {
    box-shadow: 0 2px 4px 0 var(--devui-shadow, rgba(37, 43, 58, .24))!important
}

.tab-content[data-v-d8bbca9e] {
    color: var(--devui-text, #252b3a);
    font-size: 18px
}

.darkMode[data-v-d8bbca9e] {
    filter: brightness(.9)
}

@media screen and (max-width: 768px) {
    .icon-container[data-v-d8bbca9e] {
        width:110px;
        height: 110px;
        top: -60px
    }

    .slider-container[data-v-d8bbca9e] {
        height: 120px
    }

    .tabs[data-v-d8bbca9e] ul {
        height: 40px
    }

    .tabs[data-v-d8bbca9e] li {
        height: 40px;
        line-height: 40px
    }

    .tabs[data-v-d8bbca9e] .devui-tabs__nav-content a {
        line-height: 40px
    }

    .tabs[data-v-d8bbca9e] .devui-tabs__nav-slider-animation,.fix-tab[data-v-d8bbca9e] {
        height: 40px
    }
}

.page-header[data-v-1fa104fb] {
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.page-container[data-v-1fa104fb] {
    display: flex;
    background-color: var(--devui-base-bg, #ffffff)
}

.main-container[data-v-1fa104fb] {
    width: calc(100vw - 20px);
    padding-right: 150px;
    max-width: 1600px;
    margin: 0 auto
}

.main-container.main-container-playground[data-v-1fa104fb] {
    padding-right: 0
}

.main-content[data-v-1fa104fb] {
    width: 100%;
    padding: 80px 11vw 32px 25vw;
    position: relative;
    z-index: 1
}

@media screen and (min-width: 1680px) {
    .main-content[data-v-1fa104fb] {
        padding:80px 180px 32px 420px
    }
}

.main-content.main-content-playground[data-v-1fa104fb] {
    padding: 48px 10vw 0
}

@media screen and (min-width: 1680px) {
    .main-content.main-content-playground[data-v-1fa104fb] {
        padding:48px 168px 0
    }
}

.main-content .title[data-v-1fa104fb] {
    font-size: 36px;
    height: 24px;
    font-weight: 700;
    color: var(--devui-text, #252b3a)
}

.main-content .description[data-v-1fa104fb] {
    margin-bottom: 30px;
    height: 24px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f)
}

.content-nav[data-v-1fa104fb] {
    font-size: var(--devui-font-size-sm, 12px);
    position: fixed;
    top: 80px;
    right: 40px;
    z-index: 10;
    width: 200px;
    max-height: 100%;
    overflow-x: hidden
}

.sider-container[data-v-1fa104fb] {
    border-right: 1px solid #dfe1e6;
    width: 302px;
    height: 100vh;
    position: fixed;
    background: #fff;
    display: flex;
    flex-direction: column
}

.search[data-v-1fa104fb] {
    margin: 20px 10px
}

.side-menu[data-v-1fa104fb] {
    width: 320px;
    z-index: 1001
}

@media screen and (max-width: 1280px) {
    .content-nav[data-v-1fa104fb] {
        display:none;
        transition: .5s
    }

    .main-container[data-v-1fa104fb] {
        padding-right: 0
    }

    .main-content[data-v-1fa104fb] {
        padding: 80px 2vw 32px 250px
    }

    .main-content.main-content-playground[data-v-1fa104fb] {
        padding: 48px 10vw 0
    }

    .side-menu[data-v-1fa104fb] {
        width: 220px;
        transition: width .5s
    }
}

@media screen and (max-width: 768px) {
    .side-menu[data-v-1fa104fb] {
        width:0;
        padding: 0;
        transition: .5s
    }

    .main-content[data-v-1fa104fb] {
        min-width: 320px;
        padding: 80px 3vw 32px
    }
}

@media (max-width: 320px) {
    .page-header[data-v-1fa104fb] {
        width:320px
    }
}

:root {
    --vp-c-white: #ffffff;
    --vp-c-black: #000000;
    --vp-c-neutral: var(--vp-c-black);
    --vp-c-neutral-inverse: var(--vp-c-white)
}

.dark {
    --vp-c-neutral: var(--vp-c-white);
    --vp-c-neutral-inverse: var(--vp-c-black)
}

:root {
    --vp-c-gray-1: #dddde3;
    --vp-c-gray-2: #e4e4e9;
    --vp-c-gray-3: #ebebef;
    --vp-c-gray-soft: rgba(142, 150, 170, .14);
    --vp-c-indigo-1: #3451b2;
    --vp-c-indigo-2: #3a5ccc;
    --vp-c-indigo-3: #5672cd;
    --vp-c-indigo-soft: rgba(100, 108, 255, .14);
    --vp-c-purple-1: #6f42c1;
    --vp-c-purple-2: #7e4cc9;
    --vp-c-purple-3: #8e5cd9;
    --vp-c-purple-soft: rgba(159, 122, 234, .14);
    --vp-c-green-1: #18794e;
    --vp-c-green-2: #299764;
    --vp-c-green-3: #30a46c;
    --vp-c-green-soft: rgba(16, 185, 129, .14);
    --vp-c-yellow-1: #915930;
    --vp-c-yellow-2: #946300;
    --vp-c-yellow-3: #9f6a00;
    --vp-c-yellow-soft: rgba(234, 179, 8, .14);
    --vp-c-red-1: #b8272c;
    --vp-c-red-2: #d5393e;
    --vp-c-red-3: #e0575b;
    --vp-c-red-soft: rgba(244, 63, 94, .14);
    --vp-c-sponsor: #db2777
}

.dark {
    --vp-c-gray-1: #515c67;
    --vp-c-gray-2: #414853;
    --vp-c-gray-3: #32363f;
    --vp-c-gray-soft: rgba(101, 117, 133, .16);
    --vp-c-indigo-1: #a8b1ff;
    --vp-c-indigo-2: #5c73e7;
    --vp-c-indigo-3: #3e63dd;
    --vp-c-indigo-soft: rgba(100, 108, 255, .16);
    --vp-c-purple-1: #c8abfa;
    --vp-c-purple-2: #a879e6;
    --vp-c-purple-3: #8e5cd9;
    --vp-c-purple-soft: rgba(159, 122, 234, .16);
    --vp-c-green-1: #3dd68c;
    --vp-c-green-2: #30a46c;
    --vp-c-green-3: #298459;
    --vp-c-green-soft: rgba(16, 185, 129, .16);
    --vp-c-yellow-1: #f9b44e;
    --vp-c-yellow-2: #da8b17;
    --vp-c-yellow-3: #a46a0a;
    --vp-c-yellow-soft: rgba(234, 179, 8, .16);
    --vp-c-red-1: #f66f81;
    --vp-c-red-2: #f14158;
    --vp-c-red-3: #b62a3c;
    --vp-c-red-soft: rgba(244, 63, 94, .16)
}

:root {
    --vp-c-bg: #ffffff;
    --vp-c-bg-alt: #f6f6f7;
    --vp-c-bg-elv: #ffffff;
    --vp-c-bg-soft: #f6f6f7
}

.dark {
    --vp-c-bg: #1b1b1f;
    --vp-c-bg-alt: #161618;
    --vp-c-bg-elv: #202127;
    --vp-c-bg-soft: #202127
}

:root {
    --vp-c-border: #c2c2c4;
    --vp-c-divider: #e2e2e3;
    --vp-c-gutter: #e2e2e3
}

.dark {
    --vp-c-border: #3c3f44;
    --vp-c-divider: #2e2e32;
    --vp-c-gutter: #000000
}

:root {
    --vp-c-text-1: rgba(60, 60, 67);
    --vp-c-text-2: rgba(60, 60, 67, .78);
    --vp-c-text-3: rgba(60, 60, 67, .56)
}

.dark {
    --vp-c-text-1: rgba(255, 255, 245, .86);
    --vp-c-text-2: rgba(235, 235, 245, .6);
    --vp-c-text-3: rgba(235, 235, 245, .38)
}

:root {
    --vp-c-default-1: var(--vp-c-gray-1);
    --vp-c-default-2: var(--vp-c-gray-2);
    --vp-c-default-3: var(--vp-c-gray-3);
    --vp-c-default-soft: var(--vp-c-gray-soft);
    --vp-c-brand-1: var(--vp-c-indigo-1);
    --vp-c-brand-2: var(--vp-c-indigo-2);
    --vp-c-brand-3: var(--vp-c-indigo-3);
    --vp-c-brand-soft: var(--vp-c-indigo-soft);
    --vp-c-brand: var(--vp-c-brand-1);
    --vp-c-tip-1: var(--vp-c-brand-1);
    --vp-c-tip-2: var(--vp-c-brand-2);
    --vp-c-tip-3: var(--vp-c-brand-3);
    --vp-c-tip-soft: var(--vp-c-brand-soft);
    --vp-c-note-1: var(--vp-c-brand-1);
    --vp-c-note-2: var(--vp-c-brand-2);
    --vp-c-note-3: var(--vp-c-brand-3);
    --vp-c-note-soft: var(--vp-c-brand-soft);
    --vp-c-success-1: var(--vp-c-green-1);
    --vp-c-success-2: var(--vp-c-green-2);
    --vp-c-success-3: var(--vp-c-green-3);
    --vp-c-success-soft: var(--vp-c-green-soft);
    --vp-c-important-1: var(--vp-c-purple-1);
    --vp-c-important-2: var(--vp-c-purple-2);
    --vp-c-important-3: var(--vp-c-purple-3);
    --vp-c-important-soft: var(--vp-c-purple-soft);
    --vp-c-warning-1: var(--vp-c-yellow-1);
    --vp-c-warning-2: var(--vp-c-yellow-2);
    --vp-c-warning-3: var(--vp-c-yellow-3);
    --vp-c-warning-soft: var(--vp-c-yellow-soft);
    --vp-c-danger-1: var(--vp-c-red-1);
    --vp-c-danger-2: var(--vp-c-red-2);
    --vp-c-danger-3: var(--vp-c-red-3);
    --vp-c-danger-soft: var(--vp-c-red-soft);
    --vp-c-caution-1: var(--vp-c-red-1);
    --vp-c-caution-2: var(--vp-c-red-2);
    --vp-c-caution-3: var(--vp-c-red-3);
    --vp-c-caution-soft: var(--vp-c-red-soft)
}

:root {
    --vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-optical-sizing: auto
}

:root:where(:lang(zh)) {
    --vp-font-family-base: "Punctuation SC", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

:root {
    --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
    --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
    --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
    --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
    --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)
}

:root {
    --vp-z-index-footer: 10;
    --vp-z-index-local-nav: 20;
    --vp-z-index-nav: 30;
    --vp-z-index-layout-top: 40;
    --vp-z-index-backdrop: 50;
    --vp-z-index-sidebar: 60
}

@media (min-width: 960px) {
    :root {
        --vp-z-index-sidebar: 25
    }
}

:root {
    --vp-layout-max-width: 1440px
}

:root {
    --vp-header-anchor-symbol: "#"
}

:root {
    --vp-code-line-height: 1.7;
    --vp-code-font-size: .875em;
    --vp-code-color: var(--vp-c-brand-1);
    --vp-code-link-color: var(--vp-c-brand-1);
    --vp-code-link-hover-color: var(--vp-c-brand-2);
    --vp-code-bg: var(--vp-c-default-soft);
    --vp-code-block-color: var(--vp-c-text-2);
    --vp-code-block-bg: var(--vp-c-bg-alt);
    --vp-code-block-divider-color: var(--vp-c-gutter);
    --vp-code-lang-color: var(--vp-c-text-3);
    --vp-code-line-highlight-color: var(--vp-c-default-soft);
    --vp-code-line-number-color: var(--vp-c-text-3);
    --vp-code-line-diff-add-color: var(--vp-c-success-soft);
    --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
    --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
    --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
    --vp-code-line-warning-color: var(--vp-c-warning-soft);
    --vp-code-line-error-color: var(--vp-c-danger-soft);
    --vp-code-copy-code-border-color: var(--vp-c-divider);
    --vp-code-copy-code-bg: var(--vp-c-bg-soft);
    --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
    --vp-code-copy-code-hover-bg: var(--vp-c-bg);
    --vp-code-copy-code-active-text: var(--vp-c-text-2);
    --vp-code-copy-copied-text-content: "Copied";
    --vp-code-tab-divider: var(--vp-code-block-divider-color);
    --vp-code-tab-text-color: var(--vp-c-text-2);
    --vp-code-tab-bg: var(--vp-code-block-bg);
    --vp-code-tab-hover-text-color: var(--vp-c-text-1);
    --vp-code-tab-active-text-color: var(--vp-c-text-1);
    --vp-code-tab-active-bar-color: var(--vp-c-brand-1)
}

:root {
    --vp-button-brand-border: transparent;
    --vp-button-brand-text: var(--vp-c-white);
    --vp-button-brand-bg: var(--vp-c-brand-3);
    --vp-button-brand-hover-border: transparent;
    --vp-button-brand-hover-text: var(--vp-c-white);
    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
    --vp-button-brand-active-border: transparent;
    --vp-button-brand-active-text: var(--vp-c-white);
    --vp-button-brand-active-bg: var(--vp-c-brand-1);
    --vp-button-alt-border: transparent;
    --vp-button-alt-text: var(--vp-c-text-1);
    --vp-button-alt-bg: var(--vp-c-default-3);
    --vp-button-alt-hover-border: transparent;
    --vp-button-alt-hover-text: var(--vp-c-text-1);
    --vp-button-alt-hover-bg: var(--vp-c-default-2);
    --vp-button-alt-active-border: transparent;
    --vp-button-alt-active-text: var(--vp-c-text-1);
    --vp-button-alt-active-bg: var(--vp-c-default-1);
    --vp-button-sponsor-border: var(--vp-c-text-2);
    --vp-button-sponsor-text: var(--vp-c-text-2);
    --vp-button-sponsor-bg: transparent;
    --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
    --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
    --vp-button-sponsor-hover-bg: transparent;
    --vp-button-sponsor-active-border: var(--vp-c-sponsor);
    --vp-button-sponsor-active-text: var(--vp-c-sponsor);
    --vp-button-sponsor-active-bg: transparent
}

:root {
    --vp-custom-block-font-size: 14px;
    --vp-custom-block-code-font-size: 13px;
    --vp-custom-block-info-border: transparent;
    --vp-custom-block-info-text: var(--vp-c-text-1);
    --vp-custom-block-info-bg: var(--vp-c-default-soft);
    --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
    --vp-custom-block-note-border: transparent;
    --vp-custom-block-note-text: var(--vp-c-text-1);
    --vp-custom-block-note-bg: var(--vp-c-default-soft);
    --vp-custom-block-note-code-bg: var(--vp-c-default-soft);
    --vp-custom-block-tip-border: transparent;
    --vp-custom-block-tip-text: var(--vp-c-text-1);
    --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
    --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
    --vp-custom-block-important-border: transparent;
    --vp-custom-block-important-text: var(--vp-c-text-1);
    --vp-custom-block-important-bg: var(--vp-c-important-soft);
    --vp-custom-block-important-code-bg: var(--vp-c-important-soft);
    --vp-custom-block-warning-border: transparent;
    --vp-custom-block-warning-text: var(--vp-c-text-1);
    --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
    --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
    --vp-custom-block-danger-border: transparent;
    --vp-custom-block-danger-text: var(--vp-c-text-1);
    --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
    --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
    --vp-custom-block-caution-border: transparent;
    --vp-custom-block-caution-text: var(--vp-c-text-1);
    --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
    --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
    --vp-custom-block-details-border: var(--vp-custom-block-info-border);
    --vp-custom-block-details-text: var(--vp-custom-block-info-text);
    --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
    --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)
}

:root {
    --vp-input-border-color: var(--vp-c-border);
    --vp-input-bg-color: var(--vp-c-bg-alt);
    --vp-input-switch-bg-color: var(--vp-c-default-soft)
}

:root {
    --vp-nav-height: 64px;
    --vp-nav-bg-color: var(--vp-c-bg);
    --vp-nav-screen-bg-color: var(--vp-c-bg);
    --vp-nav-logo-height: 24px
}

.hide-nav {
    --vp-nav-height: 0px
}

.hide-nav .VPSidebar {
    --vp-nav-height: 22px
}

:root {
    --vp-local-nav-bg-color: var(--vp-c-bg)
}

:root {
    --vp-sidebar-width: 272px;
    --vp-sidebar-bg-color: var(--vp-c-bg-alt)
}

:root {
    --vp-backdrop-bg-color: rgba(0, 0, 0, .6)
}

:root {
    --vp-home-hero-name-color: var(--vp-c-brand-1);
    --vp-home-hero-name-background: transparent;
    --vp-home-hero-image-background-image: none;
    --vp-home-hero-image-filter: none
}

:root {
    --vp-badge-info-border: transparent;
    --vp-badge-info-text: var(--vp-c-text-2);
    --vp-badge-info-bg: var(--vp-c-default-soft);
    --vp-badge-tip-border: transparent;
    --vp-badge-tip-text: var(--vp-c-tip-1);
    --vp-badge-tip-bg: var(--vp-c-tip-soft);
    --vp-badge-warning-border: transparent;
    --vp-badge-warning-text: var(--vp-c-warning-1);
    --vp-badge-warning-bg: var(--vp-c-warning-soft);
    --vp-badge-danger-border: transparent;
    --vp-badge-danger-text: var(--vp-c-danger-1);
    --vp-badge-danger-bg: var(--vp-c-danger-soft)
}

:root {
    --vp-carbon-ads-text-color: var(--vp-c-text-1);
    --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
    --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
    --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
    --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)
}

:root {
    --vp-local-search-bg: var(--vp-c-bg);
    --vp-local-search-result-bg: var(--vp-c-bg);
    --vp-local-search-result-border: var(--vp-c-divider);
    --vp-local-search-result-selected-bg: var(--vp-c-bg);
    --vp-local-search-result-selected-border: var(--vp-c-brand-1);
    --vp-local-search-highlight-bg: var(--vp-c-brand-1);
    --vp-local-search-highlight-text: var(--vp-c-neutral-inverse)
}

@media (prefers-reduced-motion: reduce) {
    *,:before,:after {
        animation-delay: -1ms!important;
        animation-duration: 1ms!important;
        animation-iteration-count: 1!important;
        background-attachment: initial!important;
        scroll-behavior: auto!important;
        transition-duration: 0s!important;
        transition-delay: 0s!important
    }
}

*,:before,:after {
    box-sizing: border-box
}

html {
    line-height: 1.4;
    font-size: 16px;
    -webkit-text-size-adjust: 100%
}

html.dark {
    color-scheme: dark
}

body {
    margin: 0;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    line-height: 24px;
    font-family: var(--vp-font-family-base);
    font-size: 16px;
    font-weight: 400;
    color: var(--vp-c-text-1);
    font-synthesis: style;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

main {
    display: block
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400
}

p {
    margin: 0
}

strong,b {
    font-weight: 600
}

a,area,button,[role=button],input,label,select,summary,textarea {
    touch-action: manipulation
}

a {
    color: inherit;
    text-decoration: inherit
}

ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

blockquote {
    margin: 0
}

pre,code,kbd,samp {
    font-family: var(--vp-font-family-mono)
}

img,svg,video,canvas,audio,iframe,embed,object {
    display: block
}

figure {
    margin: 0
}

img,video {
    max-width: 100%;
    height: auto
}

button,input,optgroup,select,textarea {
    border: 0;
    padding: 0;
    line-height: inherit;
    color: inherit
}

button {
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    background-image: none
}

button:enabled,[role=button]:enabled {
    cursor: pointer
}

button:focus,button:focus-visible {
    outline: 1px dotted;
    outline: 4px auto -webkit-focus-ring-color
}

button:focus:not(:focus-visible) {
    outline: none!important
}

input:focus,textarea:focus,select:focus {
    outline: none
}

table {
    border-collapse: collapse
}

input {
    background-color: transparent
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: var(--vp-c-text-3)
}

input::-ms-input-placeholder,textarea::-ms-input-placeholder {
    color: var(--vp-c-text-3)
}

input::placeholder,textarea::placeholder {
    color: var(--vp-c-text-3)
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

textarea {
    resize: vertical
}

select {
    -webkit-appearance: none
}

fieldset {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6,li,p {
    overflow-wrap: break-word
}

vite-error-overlay {
    z-index: 9999
}

mjx-container {
    overflow-x: auto
}

mjx-container>svg {
    display: inline-block;
    margin: auto
}

[class^=vpi-],[class*=" vpi-"],.vp-icon {
    width: 1em;
    height: 1em
}

[class^=vpi-].bg,[class*=" vpi-"].bg,.vp-icon.bg {
    background-size: 100% 100%;
    background-color: transparent
}

[class^=vpi-]:not(.bg),[class*=" vpi-"]:not(.bg),.vp-icon:not(.bg) {
    -webkit-mask: var(--icon) no-repeat;
    mask: var(--icon) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
    color: inherit
}

.vpi-align-left {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E")
}

.vpi-arrow-right,.vpi-arrow-down,.vpi-arrow-left,.vpi-arrow-up {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")
}

.vpi-chevron-right,.vpi-chevron-down,.vpi-chevron-left,.vpi-chevron-up {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
}

.vpi-chevron-down,.vpi-arrow-down {
    transform: rotate(90deg)
}

.vpi-chevron-left,.vpi-arrow-left {
    transform: rotate(180deg)
}

.vpi-chevron-up,.vpi-arrow-up {
    transform: rotate(-90deg)
}

.vpi-square-pen {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E")
}

.vpi-plus {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")
}

.vpi-sun {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")
}

.vpi-moon {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")
}

.vpi-more-horizontal {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")
}

.vpi-languages {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E")
}

.vpi-heart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")
}

.vpi-search {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
}

.vpi-layout-list {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E")
}

.vpi-delete {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E")
}

.vpi-corner-down-left {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")
}

:root {
    --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
    --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden
}

.custom-block {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px 16px 8px;
    line-height: 24px;
    font-size: var(--vp-custom-block-font-size);
    color: var(--vp-c-text-2)
}

.custom-block.info {
    border-color: var(--vp-custom-block-info-border);
    color: var(--vp-custom-block-info-text);
    background-color: var(--vp-custom-block-info-bg)
}

.custom-block.info a,.custom-block.info code {
    color: var(--vp-c-brand-1)
}

.custom-block.info a:hover,.custom-block.info a:hover>code {
    color: var(--vp-c-brand-2)
}

.custom-block.info code {
    background-color: var(--vp-custom-block-info-code-bg)
}

.custom-block.note {
    border-color: var(--vp-custom-block-note-border);
    color: var(--vp-custom-block-note-text);
    background-color: var(--vp-custom-block-note-bg)
}

.custom-block.note a,.custom-block.note code {
    color: var(--vp-c-brand-1)
}

.custom-block.note a:hover,.custom-block.note a:hover>code {
    color: var(--vp-c-brand-2)
}

.custom-block.note code {
    background-color: var(--vp-custom-block-note-code-bg)
}

.custom-block.tip {
    border-color: var(--vp-custom-block-tip-border);
    color: var(--vp-custom-block-tip-text);
    background-color: var(--vp-custom-block-tip-bg)
}

.custom-block.tip a,.custom-block.tip code {
    color: var(--vp-c-tip-1)
}

.custom-block.tip a:hover,.custom-block.tip a:hover>code {
    color: var(--vp-c-tip-2)
}

.custom-block.tip code {
    background-color: var(--vp-custom-block-tip-code-bg)
}

.custom-block.important {
    border-color: var(--vp-custom-block-important-border);
    color: var(--vp-custom-block-important-text);
    background-color: var(--vp-custom-block-important-bg)
}

.custom-block.important a,.custom-block.important code {
    color: var(--vp-c-important-1)
}

.custom-block.important a:hover,.custom-block.important a:hover>code {
    color: var(--vp-c-important-2)
}

.custom-block.important code {
    background-color: var(--vp-custom-block-important-code-bg)
}

.custom-block.warning {
    border-color: var(--vp-custom-block-warning-border);
    color: var(--vp-custom-block-warning-text);
    background-color: var(--vp-custom-block-warning-bg)
}

.custom-block.warning a,.custom-block.warning code {
    color: var(--vp-c-warning-1)
}

.custom-block.warning a:hover,.custom-block.warning a:hover>code {
    color: var(--vp-c-warning-2)
}

.custom-block.warning code {
    background-color: var(--vp-custom-block-warning-code-bg)
}

.custom-block.danger {
    border-color: var(--vp-custom-block-danger-border);
    color: var(--vp-custom-block-danger-text);
    background-color: var(--vp-custom-block-danger-bg)
}

.custom-block.danger a,.custom-block.danger code {
    color: var(--vp-c-danger-1)
}

.custom-block.danger a:hover,.custom-block.danger a:hover>code {
    color: var(--vp-c-danger-2)
}

.custom-block.danger code {
    background-color: var(--vp-custom-block-danger-code-bg)
}

.custom-block.caution {
    border-color: var(--vp-custom-block-caution-border);
    color: var(--vp-custom-block-caution-text);
    background-color: var(--vp-custom-block-caution-bg)
}

.custom-block.caution a,.custom-block.caution code {
    color: var(--vp-c-caution-1)
}

.custom-block.caution a:hover,.custom-block.caution a:hover>code {
    color: var(--vp-c-caution-2)
}

.custom-block.caution code {
    background-color: var(--vp-custom-block-caution-code-bg)
}

.custom-block.details {
    border-color: var(--vp-custom-block-details-border);
    color: var(--vp-custom-block-details-text);
    background-color: var(--vp-custom-block-details-bg)
}

.custom-block.details a {
    color: var(--vp-c-brand-1)
}

.custom-block.details a:hover,.custom-block.details a:hover>code {
    color: var(--vp-c-brand-2)
}

.custom-block.details code {
    background-color: var(--vp-custom-block-details-code-bg)
}

.custom-block-title {
    font-weight: 600
}

.custom-block p+p {
    margin: 8px 0
}

.custom-block.details summary {
    margin: 0 0 8px;
    font-weight: 700;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.custom-block.details summary+p {
    margin: 8px 0
}

.custom-block a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .25s
}

.custom-block a:hover {
    opacity: .75
}

.custom-block code {
    font-size: var(--vp-custom-block-code-font-size)
}

.custom-block.custom-block th,.custom-block.custom-block blockquote>p {
    font-size: var(--vp-custom-block-font-size);
    color: inherit
}

.dark .vp-code span {
    color: var(--shiki-dark, inherit)
}

html:not(.dark) .vp-code span {
    color: var(--shiki-light, inherit)
}

.vp-code-group {
    margin-top: 16px
}

.vp-code-group .tabs {
    position: relative;
    display: flex;
    margin-right: -24px;
    margin-left: -24px;
    padding: 0 12px;
    background-color: var(--vp-code-tab-bg);
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: inset 0 -1px var(--vp-code-tab-divider)
}

@media (min-width: 640px) {
    .vp-code-group .tabs {
        margin-right:0;
        margin-left: 0;
        border-radius: 8px 8px 0 0
    }
}

.vp-code-group .tabs input {
    position: fixed;
    opacity: 0;
    pointer-events: none
}

.vp-code-group .tabs label {
    position: relative;
    display: inline-block;
    border-bottom: 1px solid transparent;
    padding: 0 12px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-code-tab-text-color);
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s
}

.vp-code-group .tabs label:after {
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    z-index: 1;
    height: 2px;
    border-radius: 2px;
    content: "";
    background-color: transparent;
    transition: background-color .25s
}

.vp-code-group label:hover {
    color: var(--vp-code-tab-hover-text-color)
}

.vp-code-group input:checked+label {
    color: var(--vp-code-tab-active-text-color)
}

.vp-code-group input:checked+label:after {
    background-color: var(--vp-code-tab-active-bar-color)
}

.vp-code-group div[class*=language-],.vp-block {
    display: none;
    margin-top: 0!important;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important
}

.vp-code-group div[class*=language-].active,.vp-block.active {
    display: block
}

.vp-block {
    padding: 20px 24px
}

.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6 {
    position: relative;
    font-weight: 600;
    outline: none
}

.vp-doc h1 {
    letter-spacing: -.02em;
    line-height: 40px;
    font-size: 28px
}

.vp-doc h2 {
    margin: 48px 0 16px;
    border-top: 1px solid var(--vp-c-divider);
    padding-top: 24px;
    letter-spacing: -.02em;
    line-height: 32px;
    font-size: 24px
}

.vp-doc h3 {
    margin: 32px 0 0;
    letter-spacing: -.01em;
    line-height: 28px;
    font-size: 20px
}

.vp-doc h4 {
    margin: 24px 0 0;
    letter-spacing: -.01em;
    line-height: 24px;
    font-size: 18px
}

.vp-doc .header-anchor {
    display: none
}

@media (min-width: 768px) {
    .vp-doc h1 {
        letter-spacing:-.02em;
        line-height: 40px;
        font-size: 32px
    }
}

.vp-doc p,.vp-doc summary {
    margin: 16px 0
}

.vp-doc p {
    line-height: 28px
}

.vp-doc blockquote {
    margin: 16px 0;
    border-left: 2px solid var(--vp-c-divider);
    padding-left: 16px;
    transition: border-color .5s;
    color: var(--vp-c-text-2)
}

.vp-doc blockquote>p {
    margin: 0;
    font-size: 16px;
    transition: color .5s
}

.vp-doc a {
    font-weight: 500;
    color: var(--vp-c-brand-1);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .25s,opacity .25s
}

.vp-doc a:hover {
    color: var(--vp-c-brand-2)
}

.vp-doc strong {
    font-weight: 600
}

.vp-doc ul,.vp-doc ol {
    padding-left: 1.25rem;
    margin: 16px 0
}

.vp-doc ul {
    list-style: disc
}

.vp-doc ol {
    list-style: decimal
}

.vp-doc li+li {
    margin-top: 8px
}

.vp-doc li>ol,.vp-doc li>ul {
    margin: 8px 0 0
}

.vp-doc table {
    display: block;
    border-collapse: collapse;
    margin: 20px 0;
    overflow-x: auto
}

.vp-doc tr {
    background-color: var(--vp-c-bg);
    border-top: 1px solid var(--vp-c-divider);
    transition: background-color .5s
}

.vp-doc tr:nth-child(2n) {
    background-color: var(--vp-c-bg-soft)
}

.vp-doc th,.vp-doc td {
    border: 1px solid var(--vp-c-divider);
    padding: 8px 16px
}

.vp-doc th {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-c-text-2);
    background-color: var(--vp-c-bg-soft)
}

.vp-doc td {
    font-size: 14px
}

.vp-doc hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--vp-c-divider)
}

.vp-doc .custom-block {
    margin: 16px 0
}

.vp-doc .custom-block p {
    margin: 8px 0;
    line-height: 24px
}

.vp-doc .custom-block p:first-child {
    margin: 0
}

.vp-doc .custom-block div[class*=language-] {
    margin: 8px 0;
    border-radius: 8px
}

.vp-doc .custom-block div[class*=language-] code {
    font-weight: 400;
    background-color: transparent
}

.vp-doc .custom-block .vp-code-group .tabs {
    margin: 0;
    border-radius: 8px 8px 0 0
}

.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code {
    font-size: var(--vp-code-font-size);
    color: var(--vp-code-color)
}

.vp-doc :not(pre)>code {
    border-radius: 4px;
    padding: 3px 6px;
    background-color: var(--vp-code-bg);
    transition: color .25s,background-color .5s
}

.vp-doc a>code {
    color: var(--vp-code-link-color)
}

.vp-doc a:hover>code {
    color: var(--vp-code-link-hover-color)
}

.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code,.vp-doc h4>code {
    font-size: .9em
}

.vp-doc div[class*=language-],.vp-block {
    border-radius: 8px;
    position: relative;
    margin: 16px 0;
    background-color: var(--vp-code-block-bg);
    overflow-x: auto;
    transition: background-color .5s
}

@media (min-width: 640px) {
    .vp-doc div[class*=language-],.vp-block {
        border-radius:8px;
        margin: 16px 0
    }
}

@media (max-width: 639px) {
    .vp-doc li div[class*=language-] {
        border-radius:8px 0 0 8px
    }
}

.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-] {
    margin-top: -8px
}

.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code {
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

.vp-doc [class*=language-] pre {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 20px 0;
    background: transparent;
    overflow-x: auto
}

.vp-doc [class*=language-] code {
    display: block;
    padding: 0 24px;
    width: fit-content;
    min-width: 100%;
    line-height: var(--vp-code-line-height);
    font-size: var(--vp-code-font-size);
    color: var(--vp-code-block-color);
    transition: color .5s
}

.vp-doc [class*=language-] code .highlighted {
    background-color: var(--vp-code-line-highlight-color);
    transition: background-color .5s;
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 48px);
    display: inline-block
}

.vp-doc [class*=language-] code .highlighted.error {
    background-color: var(--vp-code-line-error-color)
}

.vp-doc [class*=language-] code .highlighted.warning {
    background-color: var(--vp-code-line-warning-color)
}

.vp-doc [class*=language-] code .diff {
    transition: background-color .5s;
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 48px);
    display: inline-block
}

.vp-doc [class*=language-] code .diff:before {
    position: absolute;
    left: 10px
}

.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus) {
    filter: blur(.095rem);
    opacity: .4;
    transition: filter .35s,opacity .35s
}

.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus) {
    opacity: .7;
    transition: filter .35s,opacity .35s
}

.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus) {
    filter: blur(0);
    opacity: 1
}

.vp-doc [class*=language-] code .diff.remove {
    background-color: var(--vp-code-line-diff-remove-color);
    opacity: .7
}

.vp-doc [class*=language-] code .diff.remove:before {
    content: "-";
    color: var(--vp-code-line-diff-remove-symbol-color)
}

.vp-doc [class*=language-] code .diff.add {
    background-color: var(--vp-code-line-diff-add-color)
}

.vp-doc [class*=language-] code .diff.add:before {
    content: "+";
    color: var(--vp-code-line-diff-add-symbol-color)
}

.vp-doc div[class*=language-].line-numbers-mode {
    padding-left: 32px
}

.vp-doc .line-numbers-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    border-right: 1px solid var(--vp-code-block-divider-color);
    padding-top: 20px;
    width: 32px;
    text-align: center;
    font-family: var(--vp-font-family-mono);
    line-height: var(--vp-code-line-height);
    font-size: var(--vp-code-font-size);
    color: var(--vp-code-line-number-color);
    transition: border-color .5s,color .5s
}

.vp-doc [class*=language-]>button.copy {
    direction: ltr;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    border: 1px solid var(--vp-code-copy-code-border-color);
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: var(--vp-code-copy-code-bg);
    opacity: 0;
    cursor: pointer;
    background-image: var(--vp-icon-copy);
    background-position: 50%;
    background-size: 20px;
    background-repeat: no-repeat;
    transition: border-color .25s,background-color .25s,opacity .25s
}

.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus {
    opacity: 1
}

.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied {
    border-color: var(--vp-code-copy-code-hover-border-color);
    background-color: var(--vp-code-copy-code-hover-bg)
}

.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied {
    border-radius: 0 4px 4px 0;
    background-color: var(--vp-code-copy-code-hover-bg);
    background-image: var(--vp-icon-copied)
}

.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before {
    position: relative;
    top: -1px;
    transform: translate(calc(-100% - 1px));
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--vp-code-copy-code-hover-border-color);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    padding: 0 10px;
    width: fit-content;
    height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--vp-code-copy-code-active-text);
    background-color: var(--vp-code-copy-code-hover-bg);
    white-space: nowrap;
    content: var(--vp-code-copy-copied-text-content)
}

.vp-doc [class*=language-]>span.lang {
    position: absolute;
    top: 2px;
    right: 8px;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    color: var(--vp-code-lang-color);
    transition: color .4s,opacity .4s
}

.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang {
    opacity: 0
}

.vp-doc .VPTeamMembers {
    margin-top: 24px
}

.vp-doc .VPTeamMembers.small.count-1 .container {
    margin: 0!important;
    max-width: calc((100% - 24px)/2)!important
}

.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container {
    max-width: 100%!important
}

.vp-doc .VPTeamMembers.medium.count-1 .container {
    margin: 0!important;
    max-width: calc((100% - 24px)/2)!important
}

:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after {
    display: inline-block;
    margin-top: -1px;
    margin-left: 4px;
    width: 11px;
    height: 11px;
    background: currentColor;
    color: var(--vp-c-text-3);
    flex-shrink: 0;
    --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon)
}

.vp-external-link-icon:after {
    content: ""
}

.external-link-icon-enabled :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after {
    content: "";
    color: currentColor
}

.demo-block[data-v-008aac2e] {
    margin: 10px 0;
    border: solid 1px var(--devui-line, #d7d8da);
    border-radius: 20px;
    transition: .2s
}

.demo-block.hover[data-v-008aac2e] {
    box-shadow: 0 0 8px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12)),0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

[data-v-008aac2e] .mc-markdown-render p {
    margin: 0!important
}

.source[data-v-008aac2e] {
    box-sizing: border-box;
    padding: 24px;
    transition: .2s;
    overflow: auto
}

.meta[data-v-008aac2e] {
    border-top: solid 1px var(--devui-line, #d7d8da);
    background-color: var(--code-bg-color);
    overflow: hidden;
    height: 0;
    transition: height .2s
}

.description[data-v-008aac2e] {
    border: solid 1px var(--devui-line, #d7d8da);
    border-radius: 3px;
    padding: 20px;
    box-sizing: border-box;
    line-height: 26px;
    color: var(--c-text);
    word-break: break-word;
    margin: 10px 10px 6px;
    background-color: #fff
}

.demo-block-control[data-v-008aac2e] {
    border-top: solid 1px var(--devui-line, #d7d8da);
    height: 44px;
    box-sizing: border-box;
    background-color: var(--devui-base-bg, #ffffff);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
    margin-top: -1px;
    color: var(--devui-text, #252b3a)!important;
    cursor: pointer;
    position: relative
}

.icon-caret-down[data-v-008aac2e] {
    width: 16px;
    height: 100%;
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-color: inherit;
    border: 6px solid transparent;
    border-top: 7.5px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2.5px;
    margin-left: -6px
}

.icon-caret-up[data-v-008aac2e] {
    width: 16px;
    height: 100%;
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-color: inherit;
    border: 6px solid transparent;
    border-bottom: 7px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8.5px;
    margin-left: -6px
}

.demo-block-control.is-fixed[data-v-008aac2e] {
    position: sticky;
    bottom: 0;
    border-right: solid 1px var(--devui-line, #d7d8da);
    z-index: 2
}

.demo-block-control .control-icon[data-v-008aac2e] {
    display: inline-block;
    font-size: 16px;
    line-height: 44px;
    transition: .3s
}

.demo-block-control .control-icon.hovering[data-v-008aac2e] {
    color: var(--devui-text, #252b3a);
    transform: translate(-40px)
}

.demo-block-control .control-text[data-v-008aac2e] {
    position: absolute;
    transform: translate(-30px);
    font-size: 14px;
    line-height: 44px;
    font-weight: 500;
    transition: .3s;
    display: inline-block
}

.demo-block-control[data-v-008aac2e]:hover {
    color: var(--c-brand)
}

.demo-block-control .text-slide-enter[data-v-008aac2e],.demo-block-control .text-slide-leave-active[data-v-008aac2e] {
    opacity: 0;
    transform: translate(10px)
}

.demo-block-control .control-button[data-v-008aac2e] {
    color: var(--c-brand);
    font-size: 14px;
    font-weight: 500;
    margin: 0 10px
}

.demo-block-control .control-button-wrap[data-v-008aac2e] {
    line-height: 43px;
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 5px;
    padding-right: 25px
}

.highlight div[class*=language-] {
    margin: 0!important
}

.demo-block[data-v-4135b938] {
    margin: 10px 0
}

.demo-block .source[data-v-4135b938] {
    border: solid 1px #ebebeb;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 24px;
    transition: .2s
}

.devui-accordion__menu ol,.devui-accordion__menu ul {
    margin: 0!important;
    line-height: 0!important;
    font-size: 12px
}

.devui-accordion__menu-item,d-accordion-item,d-accordion-item-hreflink,d-accordion-item-routerlink,.devui-accordion__list {
    display: block
}

.devui-accordion__menu {
    display: block;
    background: var(--devui-base-bg, #ffffff);
    width: 100%;
    overflow-y: auto;
    border-radius: var(--devui-border-radius, 2px);
    height: 100%
}

.devui-accordion__menu.devui-accordion--menu-normal {
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-accordion__menu>.devui-accordion__list {
    padding: 10px 0
}

.devui-accordion__menu .devui-accordion--overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.devui-accordion__submenu {
    background: var(--devui-base-bg, #ffffff);
    width: 100%
}

.devui-accordion__item-title {
    display: block;
    height: 40px;
    width: 100%;
    padding: 0 10px 0 20px;
    font-weight: 400;
    line-height: 40px;
    color: var(--devui-text-weak, #575d6c);
    background: transparent;
    cursor: pointer
}

.devui-accordion__item-title.devui-accordion--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-accordion__item-title.devui-accordion--disabled>a {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__item-title:not(.devui-accordion--disabled):hover {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--router-active,.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--active:not(.devui-accordion--open) {
    color: var(--devui-brand-active, #526ecc);
    font-weight: 700
}

.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--router-active>a,.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--active:not(.devui-accordion--open)>a {
    color: var(--devui-brand-active, #526ecc)
}

.devui-accordion__item-title>a {
    text-decoration: none;
    display: block;
    width: 100%;
    color: var(--devui-text-weak, #575d6c)
}

.devui-accordion__item-title>a:hover {
    color: inherit;
    text-decoration: none
}

d-accordion-item-hreflink.devui-accordion__item-title,d-accordion-item-routerlink.devui-accordion__item-title {
    padding: 0
}

d-accordion-item-hreflink.devui-accordion__item-title>a,d-accordion-item-routerlink.devui-accordion__item-title>a {
    padding: 0 10px 0 20px
}

.devui-accordion__menu-item>.devui-accordion__item-title {
    position: relative
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon {
    display: inline-block;
    text-indent: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 12px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transition: transform ease-out .3s
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon>svg {
    width: 16px;
    height: 16px
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon>svg path {
    fill: var(--devui-text-weak, #575d6c)
}

.devui-accordion__menu-item>.devui-accordion__item-title:not(.devui-accordion--open).devui-accordion--active svg path {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--open>.devui-accordion__open-icon {
    transform: rotate(180deg);
    transform-origin: center
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--disabled>.devui-accordion__open-icon {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--disabled>.devui-accordion__open-icon svg path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__menu-item>.devui-accordion__item-title {
    padding-right: 30px
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) {
    color: var(--devui-brand-active, #526ecc);
    background: transparent
}

.devui-accordion__list .devui-accordion--menu-hidden {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.devui-accordion__item-title {
    position: relative
}

.devui-accordion__item-title .devui-accordion__splitter {
    position: absolute;
    display: inline-block;
    left: 10px;
    width: 2px;
    height: 40px;
    background: var(--devui-dividing-line, #f2f2f3);
    vertical-align: middle
}

.devui-accordion__item-title .devui-accordion__splitter.devui__parent-list {
    background-color: transparent
}

.devui-accordion__item-title .devui-accordion__splitter:before {
    content: "";
    display: block;
    width: 2px;
    height: 18px;
    background: var(--devui-form-control-line-active, #5e7ce0);
    position: absolute;
    top: 11px;
    left: 0;
    opacity: 0
}

.devui-accordion__item-title.devui-accordion--router-active:not(.devui-accordion--open) .devui-accordion__splitter:before,.devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) .devui-accordion__splitter:before {
    opacity: 1
}

.devui-accordion--show-animate .devui-accordion__item-title {
    transition: font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-accordion--show-animate .devui-accordion__item-title .devui-accordion__splitter:before {
    transform: scaleY(0);
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-accordion--show-animate .devui-accordion__item-title.devui-accordion--router-active:not(.devui-accordion--open) .devui-accordion__splitter:before,.devui-accordion--show-animate .devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) .devui-accordion__splitter:before {
    transform: scaleY(1)
}

.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter {
    height: 28px;
    top: 12px
}

.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter:before {
    top: 0
}

.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter {
    height: 28px;
    top: 0
}

.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>a>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter:before,.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter:before {
    top: initial;
    bottom: 0
}

.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__item-title>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter,.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter {
    height: 18px;
    top: 11px
}

.devui-accordion__item {
    list-style: none
}

.devui-accordion__item>a {
    padding: 0 10px 0 20px;
    color: var(--devui-text-weak, #575d6c);
    display: block;
    text-decoration: none;
    width: 100%
}

.devui-accordion__item-title .tag-done {
    display: inline-block;
    height: 18px;
    min-height: 20px;
    padding: 0 10px;
    margin-left: 8px;
    line-height: 18px;
    color: #fa9841;
    border: solid 1px #fa9841;
    background: var(--devui-base-bg, #ffffff);
    font-size: var(--devui-font-size, 12px);
    border-radius: var(--devui-border-radius, 2px);
    text-indent: 0;
    cursor: default
}

.dp-action-timeline {
    background-color: var(--devui-base-bg, #ffffff);
    padding: 0 20px;
    position: relative
}

.dp-action-timeline .dp-action-timeline-title {
    font-size: var(--devui-font-size-sm, 12px);
    padding-top: 12px
}

.dp-action-timeline .dp-action-timeline-title>p {
    position: relative;
    z-index: 2;
    background-color: var(--devui-base-bg, #ffffff);
    padding: 8px 0
}

.dp-action-timeline .dp-action-timeline-item {
    display: flex;
    position: relative;
    padding: 12px 0
}

.dp-action-timeline .dp-action-timeline-item.list-last-item:before {
    content: "";
    position: absolute;
    top: 24px;
    height: calc(100% - 24px);
    left: 10px;
    border-left: 4px solid var(--devui-base-bg, #ffffff);
    z-index: 2
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    position: relative;
    z-index: 3
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before,.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    left: 11px;
    background-color: var(--devui-base-bg, #ffffff);
    z-index: 3
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before {
    top: -2px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after {
    bottom: -2px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon {
    background: none
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before {
    top: 7px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before {
    bottom: 7px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon .list-empty-icon-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    top: 9px;
    left: 9px;
    border-radius: 50%
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon .icon {
    width: 24px;
    font-size: var(--devui-font-size-icon, 16px);
    color: var(--devui-icon-text, #71757f);
    text-align: center;
    line-height: 24px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-info .icon {
    color: var(--devui-info, #5e7ce0)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-danger .icon {
    color: var(--devui-danger, #f66f6a)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-success .icon {
    color: var(--devui-success, #50d4ab)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-warning .icon {
    color: var(--devui-warning, #fac20a)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-data {
    flex: 1;
    word-break: break-all
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-item-date {
    font-size: var(--devui-font-size-sm, 12px);
    color: var(--devui-aide-text, #71757f)
}

.dp-action-timeline .dp-action-timeline-item .border-bottom {
    position: absolute;
    bottom: 0;
    width: calc(100% - 12px);
    height: 1px;
    margin-left: 12px;
    background-color: var(--devui-dividing-line, #f2f2f3)
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item {
    display: flex;
    flex-direction: column
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top .vertical-list-item-top-left {
    display: flex;
    align-items: center
}

.dp-action-timeline .border-left {
    position: absolute;
    bottom: 0;
    left: 31px;
    width: 2px;
    height: 100%;
    background-color: var(--devui-dividing-line, #f2f2f3);
    z-index: 1
}

.dp-action-timeline:first-child .border-left {
    height: calc(100% - 26px)
}

.dp-action-timeline-operation-container .dp-action-timeline-operation {
    margin: 0 18px;
    padding: 4px 0;
    height: 32px;
    font-size: var(--devui-font-size-lg, 14px);
    text-align: center;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.dp-action-timeline-operation-container .dp-action-timeline-operation:hover {
    color: var(--devui-brand-active, #526ecc);
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-info {
    background-color: var(--devui-info-bg, #e9edfa)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-danger {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-success {
    background-color: var(--devui-success-bg, #cffcee)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-warning {
    background-color: var(--devui-warning-bg, #ffe1c7)
}

.dp-action-timeline-status-line .border-left {
    display: none
}

.dp-action-timeline-status-line .dp-action-timeline-item:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-line, #d7d8da)
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-info:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-info-line, #5e7ce0)
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-danger:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-danger-line, #f66f6a)
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-success:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-success-line, #50d4ab)
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-warning:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-warning-line, #fa9841)
}

.dp-action-timeline-status-line .dp-action-timeline-item.list-last-item:before {
    content: "";
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    left: 11px;
    border-left: 2px solid transparent;
    z-index: 2;
    border-color: var(--devui-base-bg, #ffffff)
}

.devui-alert {
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px);
    border: 1px solid transparent;
    padding: 8px 16px;
    line-height: 24px;
    border-radius: var(--devui-border-radius, 2px);
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden
}

.devui-alert.devui-alert--center {
    justify-content: center
}

.devui-alert .devui-alert__content {
    padding: 0 16px 0 4px;
    word-break: normal;
    word-wrap: break-word
}

.devui-alert .devui-alert__close-icon {
    color: var(--devui-text, #252b3a);
    opacity: 1;
    line-height: 26px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 8px
}

.devui-alert .devui-alert__close-icon>svg path {
    fill: var(--devui-light-text, #ffffff)
}

.devui-alert .devui-alert__close-icon span {
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px);
    font-weight: 700
}

.devui-alert.devui-alert--success {
    background-color: var(--devui-success-bg, #cffcee);
    color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--success .devui-alert__close-icon>svg path {
    fill: var(--devui-success-line, #50d4ab)
}

.devui-alert.devui-alert--info {
    background-color: var(--devui-info-bg, #e9edfa);
    color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--info .devui-alert__close-icon>svg path {
    fill: var(--devui-info-line, #5e7ce0)
}

.devui-alert.devui-alert--warning {
    background-color: var(--devui-warning-bg, #ffe1c7);
    color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path {
    fill: var(--devui-warning-line, #fa9841)
}

.devui-alert.devui-alert--danger {
    background-color: var(--devui-danger-bg, #ffd5d4);
    color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path {
    fill: var(--devui-danger-line, #f66f6a)
}

.devui-alert.devui-alert--simple {
    color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path {
    fill: var(--devui-text-weak, #575d6c)
}

.devui-alert svg.devui-alert__icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    transform: translateY(-1px)
}

.devui-alert .devui-alert__icon.devui-alert__icon--success>g path {
    fill: var(--devui-success-line, #50d4ab)
}

.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon {
    fill: var(--devui-light-text, #ffffff);
    stroke: var(--devui-light-text, #ffffff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer {
    fill: var(--devui-warning-line, #fa9841)
}

.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner {
    fill: var(--devui-light-text, #ffffff);
    stroke: var(--devui-light-text, #ffffff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer {
    fill: var(--devui-info-line, #5e7ce0)
}

.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner {
    fill: var(--devui-light-text, #ffffff);
    stroke: var(--devui-light-text, #ffffff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer {
    fill: var(--devui-danger-line, #f66f6a)
}

.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner {
    fill: var(--devui-light-text, #ffffff);
    stroke: var(--devui-light-text, #ffffff)
}

.devui-alert__icon-wrap {
    margin-right: 4px
}

.devui-alert--close {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform-origin: 50% 0;
    transition: all .3s ease-in-out
}

.devui-alert-leave-active {
    animation: alertUpOut .3s ease-in-out;
    animation-fill-mode: both
}

@keyframes alertUpOut {
    0% {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity: 1
    }

    to {
        transform: scaleY(0);
        transform-origin: 0% 0%;
        opacity: 0
    }
}

.mysidebar {
    width: 240px;
    position: absolute;
    top: 0;
    left: 0;
    height: auto
}

.scrollTarget {
    height: 450px!important;
    overflow-y: auto
}

.mycontainer {
    height: auto
}

.devui-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #adb0b8;
    background-color: var(--devui-line, #adb0b8)
}

.devui-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #8a8e99;
    background-color: var(--devui-placeholder, #8a8e99)
}

body>* ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #adb0b8;
    background-color: var(--devui-line, #adb0b8)
}

body>* ::-webkit-scrollbar-thumb:hover {
    background-color: #8a8e99;
    background-color: var(--devui-placeholder, #8a8e99)
}

.step-nav {
    padding-top: 8px;
    width: 240px
}

.step-nav>li {
    list-style: none;
    counter-increment: stepli;
    padding: 0;
    cursor: pointer;
    height: 30px;
    line-height: 1.5;
    font-size: 12px;
    font-size: var(--devui-font-size, 12px);
    color: #575d6c;
    color: var(--devui-text-weak, #575d6c);
    position: relative;
    display: flex;
    align-items: center
}

.step-nav>li.active,.step-nav>li:hover {
    color: #526ecc;
    color: var(--devui-brand-active, #526ecc)
}

.step-nav>li.active:before {
    border-color: #526ecc;
    border-color: var(--devui-brand-active, #526ecc)
}

.step-nav>li:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
    background-color: #fff;
    background-color: var(--devui-base-bg, #ffffff);
    margin-right: 20px;
    border: 2px solid #dfe1e6;
    border: 2px solid var(--devui-dividing-line, #dfe1e6)
}

.step-nav>li:not(:first-of-type) {
    margin-top: 32px
}

.step-nav>li:not(:first-of-type):after {
    content: "";
    display: block;
    position: absolute;
    top: -32px;
    left: 5px;
    width: 1px;
    height: 32px;
    border-left: 2px solid #dfe1e6;
    border-left: 2px solid var(--devui-dividing-line, #dfe1e6)
}

.mymain {
    position: relative
}

.mycontent {
    padding: 8px;
    margin-left: 240px;
    border-left: 1px solid #adb0b8;
    border-left: 1px solid var(--devui-line, #adb0b8)
}

.section-block {
    min-height: 200px;
    border-bottom: 1px dashed #adb0b8;
    border-bottom: 1px dashed var(--devui-line, #adb0b8)
}

.section-block.active.anchor-active-by-anchor-link {
    -webkit-animation: hightlight-and-disapear 3s linear 1;
    animation: hightlight-and-disapear 3s linear 1
}

@-webkit-keyframes hightlight-and-disapear {
    0% {
        outline: medium none invert
    }

    2% {
        outline: 0 none hsla(0,0%,100%,0)
    }

    10% {
        outline: 1px solid #5e7ce0;
        outline: 1px solid var(--devui-brand, #5e7ce0)
    }

    50% {
        outline: 1px solid #5e7ce0;
        outline: 1px solid var(--devui-brand, #5e7ce0)
    }

    90% {
        outline: 1px solid hsla(0,0%,100%,0)
    }

    99% {
        outline: 0 none hsla(0,0%,100%,0)
    }

    to {
        outline: medium none invert
    }
}

@keyframes hightlight-and-disapear {
    0% {
        outline: medium none invert
    }

    2% {
        outline: 0 none hsla(0,0%,100%,0)
    }

    10% {
        outline: 1px solid #5e7ce0;
        outline: 1px solid var(--devui-brand, #5e7ce0)
    }

    50% {
        outline: 1px solid #5e7ce0;
        outline: 1px solid var(--devui-brand, #5e7ce0)
    }

    90% {
        outline: 1px solid hsla(0,0%,100%,0)
    }

    99% {
        outline: 0 none hsla(0,0%,100%,0)
    }

    to {
        outline: medium none invert
    }
}

.devui-fixed-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--devui-shadow, rgba(37, 43, 58, .24));
    opacity: 1;
    z-index: 1050
}

.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active {
    transition: opacity .1s cubic-bezier(0,0,1,1)
}

.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to {
    opacity: 0
}

.devui-flexible-overlay {
    position: fixed;
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    z-index: 1000
}

.devui-flexible-overlay__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background-color: inherit
}

.devui-popover__icon-wrap {
    width: 16px;
    height: 16px;
    margin-right: 8px
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path {
    fill: var(--devui-success, #50d4ab)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon {
    fill: var(--devui-light-text, #ffffff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path {
    fill: var(--devui-warning, #fac20a)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon {
    fill: var(--devui-light-text, #ffffff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g {
    fill: var(--devui-info, #5e7ce0)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle {
    fill: var(--devui-light-text, #ffffff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path {
    fill: var(--devui-danger, #f66f6a)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle {
    fill: var(--devui-light-text, #ffffff)
}

.devui-popover__content.devui-flexible-overlay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
    padding: 4px 12px;
    line-height: 1.5;
    border-radius: var(--devui-border-radius-feedback, 4px);
    color: var(--devui-feedback-overlay-text, #dfe1e6);
    background-color: var(--devui-feedback-overlay-bg, #464d6e);
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-popover__content.devui-flexible-overlay.is-icon {
    flex-wrap: nowrap
}

.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8)
}

.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(1)
}

.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active {
    transition: transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)
}

.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active {
    transition: transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)
}

.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to {
    opacity: .8;
    transform: scaleX(.8)
}

.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from {
    opacity: 1;
    transform: scaleX(1)
}

.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active {
    transition: transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)
}

.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active {
    transition: transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)
}

.devui-form__label {
    align-self: flex-start
}

.devui-form__label--vertical {
    padding-bottom: 8px
}

.devui-form__label--sm {
    flex: 0 0 80px
}

.devui-form__label--md {
    flex: 0 0 100px
}

.devui-form__label--lg {
    flex: 0 0 150px
}

.devui-form__label--start {
    text-align: left
}

.devui-form__label--center {
    text-align: center
}

.devui-form__label--end {
    text-align: end
}

.devui-form__label-span {
    display: inline-block;
    vertical-align: middle;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f)
}

.devui-form__label--required:before {
    content: "*";
    color: red;
    display: inline-block;
    margin-right: 8px;
    margin-left: -12px
}

.devui-form__label--required-right:after {
    content: "*";
    color: red;
    display: inline-block;
    margin-left: 8px
}

.devui-form__label--required-hide:before,.devui-form__label--required-hide:after {
    display: none
}

.devui-form__label-help {
    position: relative;
    top: -.1em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    cursor: pointer
}

.devui-form__label-tips-popover .dv-popover__icon-wrap+span {
    flex: 1
}

.devui-form__control {
    flex: 1 1 auto;
    position: relative;
    width: 100%
}

.devui-form__control--horizontal {
    margin-left: 16px
}

.devui-form__control .devui-star {
    color: red
}

.devui-form__control .devui-form__control-container {
    position: relative
}

.devui-form__control .devui-form__control-container--horizontal {
    display: flex;
    width: 100%
}

.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip {
    margin: 0
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 16px;
    text-align: center;
    visibility: visible;
    pointer-events: none;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle {
    fill: var(--devui-danger, #f66f6a)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon {
    fill: var(--devui-base-bg, #ffffff)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle {
    fill: var(--devui-success, #50d4ab)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon {
    fill: var(--devui-base-bg, #ffffff)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg {
    animation: loading-keyframes 1s infinite linear
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-form__control .devui-form__control-container--has-feedback {
    display: flex;
    align-items: center
}

.devui-form__control .devui-form__control-container--has-feedback input {
    padding-right: 28px
}

.devui-form__control .devui-form__control-container--feedback-error {
    border: 1px solid #f66f6a;
    border-radius: 2px
}

.devui-form__control .devui-form__control-container--feedback-error input {
    background-color: #ffeeed;
    border-color: transparent
}

.devui-form__control .devui-form__control-container--feedback-error input:hover {
    border-color: transparent!important
}

.devui-form__control .devui-form__control-container--feedback-error input:focus {
    border-color: transparent!important
}

.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow {
    right: 24px!important
}

.devui-form__control .devui-form__control-info {
    line-height: 1
}

.devui-form__control .devui-form__control-info .error-message {
    display: inline-block;
    min-height: 20px;
    line-height: 1.5;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-danger, #f66f6a)
}

.devui-form__control .devui-form__control-info .devui-form__control-extra {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f);
    min-height: 20px;
    line-height: 1.5;
    text-align: justify
}

@keyframes loading-keyframes {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.devui-form__item--horizontal {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.devui-form__item--vertical {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

.devui-form__item--error {
    margin-bottom: 0
}

.devui-form-operation .star {
    color: red
}

@keyframes devui-busy-spinner-anim {
    0% {
        transform: rotate(0) scale(1)
    }

    50% {
        transform: rotate(180deg) scale(1.5)
    }

    to {
        transform: rotate(360deg) scale(1)
    }
}

.devui-loading__mask {
    z-index: var(--devui-z-index-full-page-overlay, 1080);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: var(--devui-line, #d7d8da);
    opacity: .3
}

.devui-loading__wrapper {
    text-align: center
}

.devui-loading--full {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-loading--hidden {
    overflow: hidden
}

.devui-loading__text {
    margin-left: 10px
}

.devui-loading__area {
    position: absolute;
    transform: translate(-50%,-50%);
    padding: 12px 14px;
    background: var(--devui-base-bg, #ffffff);
    border-radius: var(--devui-border-radius-card, 6px)
}

.devui-loading__busy-default-spinner {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    animation: devui-busy-spinner-anim 1s linear infinite
}

.devui-loading__busy-default-spinner div {
    position: absolute;
    left: 44.5%;
    top: 37%;
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.devui-loading__busy-default-spinner .devui-loading__bar1 {
    top: 0;
    left: 0;
    background: #5e7ce0;
    background: var(--devui-brand, #5e7ce0)
}

.devui-loading__busy-default-spinner .devui-loading__bar2 {
    top: 0;
    left: 9px;
    background: #859bff;
    background: var(--devui-brand-foil, #859bff)
}

.devui-loading__busy-default-spinner .devui-loading__bar3 {
    top: 9px;
    left: 0;
    background: #859bff;
    background: var(--devui-brand-foil, #859bff)
}

.devui-loading__busy-default-spinner .devui-loading__bar4 {
    top: 9px;
    left: 9px;
    background: #5e7ce0;
    background: var(--devui-brand, #5e7ce0)
}

.devui-auto-complete .devui-dropdown-menu,.devui-auto-complete__menu .devui-dropdown-menu {
    width: 100%;
    left: 0!important;
    top: 0!important;
    margin: 0!important;
    box-shadow: none
}

.devui-auto-complete .devui-dropdown-menu ul,.devui-auto-complete__menu .devui-dropdown-menu ul {
    width: 100%;
    padding: 0
}

.devui-auto-complete .devui-form-control {
    padding: 4px 0;
    width: 100%;
    background-color: transparent
}

.devui-auto-complete .active,.devui-auto-complete__menu .active {
    background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-auto-complete .devui-dropdown-menu,.devui-auto-complete__menu .devui-dropdown-menu {
    width: 100%;
    display: block
}

.devui-auto-complete .devui-auto-complete__dropdown-menu-cdk,.devui-auto-complete__menu .devui-auto-complete__dropdown-menu-cdk {
    position: static
}

.devui-auto-complete .devui-dropdown-item,.devui-auto-complete__menu .devui-dropdown-item {
    cursor: pointer;
    display: block;
    line-height: 20px;
    padding: 8px 12px;
    clear: both;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.devui-auto-complete .devui-dropdown-item:not(:first-child),.devui-auto-complete__menu .devui-dropdown-item:not(:first-child) {
    margin-top: 4px
}

.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected,.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected,.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover {
    color: var(--devui-list-item-active-text, #252b3a)!important;
    background-color: var(--devui-list-item-active-bg, #f2f5fc)!important
}

.devui-auto-complete .devui-auto-complete__no-result-template,.devui-auto-complete .devui-auto-complete__searching-template,.devui-auto-complete__menu .devui-auto-complete__no-result-template,.devui-auto-complete__menu .devui-auto-complete__searching-template {
    display: block;
    width: 100%;
    padding: 8px 12px;
    clear: both;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    color: var(--devui-disabled-text, #cfd0d3);
    line-height: 14px
}

.devui-auto-complete .devui-auto-complete__no-result-template:hover,.devui-auto-complete .devui-auto-complete__no-result-template:active,.devui-auto-complete .devui-auto-complete__no-result-template:hover:active,.devui-auto-complete .devui-auto-complete__searching-template:hover,.devui-auto-complete .devui-auto-complete__searching-template:active,.devui-auto-complete .devui-auto-complete__searching-template:hover:active,.devui-auto-complete__menu .devui-auto-complete__no-result-template:hover,.devui-auto-complete__menu .devui-auto-complete__no-result-template:active,.devui-auto-complete__menu .devui-auto-complete__no-result-template:hover:active,.devui-auto-complete__menu .devui-auto-complete__searching-template:hover,.devui-auto-complete__menu .devui-auto-complete__searching-template:active,.devui-auto-complete__menu .devui-auto-complete__searching-template:hover:active {
    background-color: var(--devui-unavailable, #f5f5f5)
}

.devui-auto-complete .devui-dropdown-item.disabled,.devui-auto-complete .devui-dropdown-item.disabled:hover,.devui-auto-complete__menu .devui-dropdown-item.disabled,.devui-auto-complete__menu .devui-dropdown-item.disabled:hover {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-auto-complete ul.devui-auto-complete__list-unstyled,.devui-auto-complete__menu ul.devui-auto-complete__list-unstyled {
    margin: 0;
    overflow-y: auto
}

.devui-auto-complete .devui-auto-complete__dropdown-bg,.devui-auto-complete__menu .devui-auto-complete__dropdown-bg {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-auto-complete .devui-auto-complete__popup-tips,.devui-auto-complete__menu .devui-auto-complete__popup-tips {
    color: var(--devui-text-weak, #575d6c);
    padding: 4px 12px
}

.devui-auto-complete .devui-auto-complete__dropdown-latestSource ul,.devui-auto-complete__menu .devui-auto-complete__dropdown-latestSource ul {
    line-height: initial!important
}

.devui-auto-complete--sm {
    height: 24px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-auto-complete--md {
    height: 32px;
    font-size: var(--devui-font-size-md, 12px)
}

.devui-auto-complete--lg {
    height: 40px;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-auto-complete__clear--icon {
    cursor: pointer
}

.devui-auto-complete-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    height: 100%
}

.devui-auto-complete-input:not(.devui-auto-complete--focus) .devui-auto-complete--glow-style:hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-auto-complete-input__wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-auto-complete-input__wrapper>input {
    border: none!important
}

.devui-auto-complete-input__wrapper--error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-auto-complete-input__wrapper--feedback {
    padding-right: 28px
}

.devui-auto-complete-input__prepend,.devui-auto-complete-input__append {
    color: var(--devui-text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 0 20px;
    white-space: nowrap;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff)
}

.devui-auto-complete-input__prepend .devui-button,.devui-auto-complete-input__prepend .devui-select .devui-select__selection,.devui-auto-complete-input__append .devui-button,.devui-auto-complete-input__append .devui-select .devui-select__selection {
    border: none;
    background-color: transparent;
    color: inherit
}

.devui-auto-complete-input__prepend .devui-button,.devui-auto-complete-input__prepend .devui-select__selection,.devui-auto-complete-input__append .devui-button,.devui-auto-complete-input__append .devui-select__selection {
    display: inline-block;
    margin: 0 -20px
}

.devui-auto-complete--glow-style:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-auto-complete--focus .devui-auto-complete-input__wrapper:not(.devui-auto-complete-input__wrapper--error) {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-auto-complete--focus .devui-auto-complete-input__wrapper:not(.devui-auto-complete-input__wrapper--error):hover {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-auto-complete--focus .devui-auto-complete--glow-style:not(.devui-auto-complete-input__wrapper--error) {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-auto-complete--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    cursor: not-allowed
}

.devui-auto-complete--disabled .devui-dropdown-origin {
    cursor: not-allowed;
    background-color: transparent!important
}

.devui-auto-complete--prepend .devui-auto-complete-input__wrapper {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.devui-auto-complete--append .devui-auto-complete-input__wrapper {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.devui-auto-complete-slot {
    display: inline-flex;
    width: 100%;
    align-items: stretch
}

.devui-auto-complete-slot .devui-auto-complete-input__prepend {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.devui-auto-complete-slot .devui-auto-complete-input__append {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.devui-auto-complete-slot .devui-auto-complete-input__prefix,.devui-auto-complete-slot .devui-auto-complete-input__suffix {
    display: inline-flex;
    white-space: nowrap;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center
}

.devui-auto-complete-slot .devui-auto-complete-input__prefix>* {
    margin-right: 8px
}

.devui-auto-complete-slot .devui-auto-complete-input__suffix>* {
    margin-left: 8px
}

.devui-auto-complete--fade-bottom-enter-from,.devui-auto-complete--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-auto-complete--fade-bottom-enter-to,.devui-auto-complete--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-auto-complete--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-auto-complete--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-auto-complete--fade-top-enter-from,.devui-auto-complete--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-auto-complete--fade-top-enter-to,.devui-auto-complete--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-auto-complete--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-auto-complete--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-icon__container {
    display: inline-block;
    color: var(--devui-icon-fill, #71757f)
}

.devui-icon__container>*:not(:last-child) {
    vertical-align: middle;
    margin-right: 8px
}

.devui-icon__container i {
    vertical-align: middle;
    transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-icon--no-slots i,.devui-icon--no-slots img {
    display: block
}

.devui-icon--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-icon--disabled i {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-icon--operable:not(.devui-icon--disabled) {
    cursor: pointer;
    transition: color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-icon--operable:not(.devui-icon--disabled) i {
    cursor: pointer
}

.devui-icon--operable:hover:not(.devui-icon--disabled) {
    color: var(--devui-icon-fill-hover, #252b3a)
}

.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container {
    background-color: var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))
}

.devui-icon--operable:hover:not(.devui-icon--disabled) i {
    color: var(--devui-icon-fill-hover, #252b3a)
}

.devui-icon--operable:active:not(.devui-icon--disabled) {
    color: var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))
}

.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container {
    background-color: var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))
}

.devui-icon--operable:active:not(.devui-icon--disabled) i {
    color: var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))
}

.devui-icon--operable.devui-icon__container {
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    margin-left: -8px;
    border-radius: var(--devui-border-radius, 2px);
    transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-icon--spin {
    animation: iconSpin 2.5s linear infinite
}

.devui-svg-icon {
    vertical-align: middle
}

@keyframes iconSpin {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.devui-icon-group {
    display: inline-flex;
    align-items: center
}

.devui-icon-group>.devui-icon__container:not(.devui-icon--operable) {
    padding: 8px;
    margin-left: 0
}

.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child {
    margin-left: -8px
}

.devui-icon-group>*:not(:first-child) {
    margin-left: 0
}

.devui-avatar {
    display: inline-block
}

.devui-avatar--style {
    display: inline-block;
    text-align: center;
    color: var(--devui-light-text, #ffffff)
}

.devui-avatar--background-0 {
    background-color: #ff8b87
}

.devui-avatar--background-1 {
    background-color: #7693f5
}

.devui-back-top {
    position: fixed;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 9
}

.devui-back-top .devui-back-top__base {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.devui-back-top .devui-back-top__base:hover {
    opacity: 1
}

.devui-back-top .devui-back-top__content {
    opacity: .4;
    background-color: var(--devui-text-weak, #575d6c);
    box-shadow: 0 0 8px #0003
}

.devui-back-top .devui-back-top__custom {
    background-color: #fff
}

.devui-badge {
    position: relative;
    display: inline-block
}

.devui-badge__content {
    font-size: var(--devui-font-size-sm, 12px);
    color: var(--devui-light-text, #ffffff)
}

.devui-badge--count {
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: var(--devui-border-radius-full, 100px);
    background: var(--devui-brand, #5e7ce0);
    text-align: center
}

.devui-badge--danger {
    background: var(--devui-danger, #f66f6a)
}

.devui-badge--warning {
    background: var(--devui-warning, #fac20a)
}

.devui-badge--waiting {
    background: var(--devui-waiting, #beccfa)
}

.devui-badge--success {
    background: var(--devui-success, #50d4ab)
}

.devui-badge--info {
    background: var(--devui-brand, #5e7ce0)
}

.devui-badge--common {
    background: var(--devui-unavailable, #f5f5f5);
    color: var(--devui-aide-text, #71757f)
}

.devui-badge--top-left {
    left: 0;
    top: 0;
    transform: translate(-50%,-50%)
}

.devui-badge--top-right {
    right: 0;
    top: 0;
    transform: translate(50%,-50%)
}

.devui-badge--bottom-left {
    left: 0;
    bottom: 0;
    transform: translate(-50%,50%)
}

.devui-badge--bottom-right {
    right: 0;
    bottom: 0;
    transform: translate(50%,50%)
}

.devui-badge--fixed {
    position: absolute
}

.devui-badge--dot {
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.devui-badge--show {
    visibility: visible;
    opacity: 1;
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-out, cubic-bezier(.16, .75, .5, 1))
}

.devui-badge--hidden {
    visibility: hidden;
    opacity: 0;
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-breadcrumb-font-style,.devui-breadcrumb__separator,.devui-breadcrumb__item a,.devui-breadcrumb__item {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f);
    line-height: 18px
}

.devui-breadcrumb__item {
    cursor: auto
}

.devui-breadcrumb__item a {
    cursor: pointer
}

.devui-breadcrumb__item a:hover {
    color: var(--devui-text, #252b3a);
    text-decoration: none
}

.devui-breadcrumb__item a,.devui-breadcrumb__item span {
    transition: color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-breadcrumb__item .is-link {
    cursor: pointer
}

.devui-breadcrumb__item .is-link:hover {
    color: var(--devui-text, #252b3a);
    text-decoration: none
}

.devui-breadcrumb__item-dropdown {
    padding: 0;
    margin: 0;
    width: 100px
}

.devui-breadcrumb__item-dropdown a:hover {
    text-decoration: none
}

.devui-breadcrumb__item-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    padding: 4px;
    cursor: pointer
}

.devui-breadcrumb__item-dropdown-item:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-breadcrumb__separator {
    margin: 0 4px
}

.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow {
    display: inline-block;
    vertical-align: text-top
}

.devui-dropdown__menu-wrap .devui-dropdown-menu {
    width: 100%
}

.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow {
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow {
    transform: rotate(180deg)
}

.fade-in-top {
    animation: fadeInTop .2s cubic-bezier(.16,.75,.5,1)
}

.fade-in-bottom {
    animation: fadeInBottom .2s cubic-bezier(.16,.75,.5,1)
}

@keyframes fadeInTop {
    0% {
        opacity: .8;
        transform: scaleY(.8) translateY(4px)
    }

    to {
        opacity: 1;
        transform: scaleY(.9999) translateY(0)
    }
}

@keyframes fadeInBottom {
    0% {
        opacity: .8;
        transform: scaleY(.8) translateY(-4px)
    }

    to {
        opacity: 1;
        transform: scaleY(.9999) translateY(0)
    }
}

.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-dropdown--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-dropdown--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-dropdown--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-dropdown--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-breadcrumb {
    display: flex;
    align-items: center
}

.devui-breadcrumb .devui-breadcrumb__item:last-child .devui-breadcrumb__separator {
    display: none
}

.devui-button {
    position: relative;
    padding: var(--devui-btn-padding, 0 20px);
    font-size: var(--devui-font-size-md, 12px);
    height: 32px;
    line-height: var(--devui-line-height-base, 1.5);
    border-radius: var(--devui-border-radius, 2px);
    border-width: 1px;
    border-color: transparent;
    background-color: transparent;
    overflow: hidden
}

.devui-button.mousedown:not(:disabled) {
    transform: scale(.95)
}

.devui-button .water-wave {
    position: absolute;
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: 50%;
    opacity: 0;
    width: 20px;
    height: 20px;
    transform: translate(-50%,-50%);
    animation: waterWave var(--devui-animation-duration-slow, .3s) var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1))
}

.devui-button:hover {
    cursor: pointer
}

.devui-button:disabled {
    cursor: not-allowed
}

.devui-button--is-loading {
    pointer-events: none
}

.devui-button--solid {
    color: var(--devui-light-text, #ffffff);
    min-width: 64px
}

.devui-button--solid i {
    color: var(--devui-light-text, #ffffff)
}

.devui-button--solid--secondary {
    color: var(--devui-text, #252b3a);
    border-color: var(--devui-btn-common-border-color, var(--devui-line, #d7d8da));
    background-color: var(--devui-btn-common-bg, var(--devui-base-bg, #ffffff))
}

.devui-button--solid--secondary:hover {
    color: var(--devui-btn-common-color-hover, var(--devui-brand-active, #526ecc));
    border-color: var(--devui-btn-common-border-color-hover, var(--devui-form-control-line-active, #5e7ce0));
    background-color: var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))
}

.devui-button--solid--secondary:focus {
    color: var(--devui-btn-common-color-active, var(--devui-brand-active, #526ecc));
    border-color: var(--devui-btn-common-border-color-active, var(--devui-form-control-line-active, #5e7ce0));
    background-color: var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))
}

.devui-button--solid--secondary:active {
    color: var(--devui-btn-common-color-active, var(--devui-brand-active, #526ecc));
    border-color: var(--devui-btn-common-border-color-active, var(--devui-form-control-line-active, #5e7ce0));
    background-color: var(--devui-btn-common-bg-hover, var(--devui-base-bg, #ffffff))
}

.devui-button--solid--secondary:disabled {
    opacity: .8
}

.devui-button--solid--primary {
    background-color: var(--devui-primary, #5e7ce0)
}

.devui-button--solid--primary:hover {
    background-color: var(--devui-primary-hover, #7693f5)
}

.devui-button--solid--primary:focus {
    background-color: var(--devui-primary-hover, #7693f5)
}

.devui-button--solid--primary:active {
    background-color: var(--devui-primary-active, #344899)
}

.devui-button--solid--primary:disabled {
    color: var(--devui-light-text, #ffffff);
    background: var(--devui-primary-disabled, #beccfa);
    border: none
}

.devui-button--solid--danger {
    background-color: var(--devui-contrast, #c7000b)
}

.devui-button--solid--danger:hover {
    background-color: var(--devui-contrast-hover, #d64a52)
}

.devui-button--solid--danger:focus {
    background-color: var(--devui-contrast-hover, #d64a52)
}

.devui-button--solid--danger:active {
    background-color: var(--devui-contrast-active, #b12220)
}

.devui-button--solid--danger:disabled {
    background-color: var(--devui-contrast-disabled, #ffbcba)
}

.devui-button--outline {
    background-color: var(--devui-block, #ffffff);
    border-style: solid
}

.devui-button--outline i {
    color: var(--devui-text, #252b3a)
}

.devui-button--outline--secondary {
    color: var(--devui-text, #252b3a);
    border-color: var(--devui-line, #d7d8da)
}

.devui-button--outline--secondary:hover,.devui-button--outline--secondary:focus,.devui-button--outline--secondary:active {
    color: var(--devui-brand-active, #526ecc);
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-button--outline--secondary:hover i,.devui-button--outline--secondary:focus i,.devui-button--outline--secondary:active i {
    color: var(--devui-brand-active, #526ecc);
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-button--outline--secondary:disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-button--outline--secondary:disabled i {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-button--outline--primary {
    color: var(--devui-brand-active, #526ecc);
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-button--outline--primary:hover,.devui-button--outline--primary:focus,.devui-button--outline--primary:active {
    color: var(--devui-brand-active-focus, #344899);
    border-color: var(--devui-form-control-line-active-hover, #344899)
}

.devui-button--outline--primary:hover i,.devui-button--outline--primary:focus i,.devui-button--outline--primary:active i {
    color: var(--devui-brand-active-focus, #344899);
    border-color: var(--devui-form-control-line-active-hover, #344899)
}

.devui-button--outline--primary:disabled {
    opacity: .8;
    color: var(--devui-brand-active, #526ecc);
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-button--outline--primary:disabled i {
    color: var(--devui-brand-active, #526ecc)
}

.devui-button--outline--danger {
    color: var(--devui-contrast, #c7000b);
    border-color: var(--devui-contrast, #c7000b)
}

.devui-button--outline--danger i {
    color: var(--devui-contrast, #c7000b)
}

.devui-button--outline--danger:hover,.devui-button--outline--danger:focus,.devui-button--outline--danger:active,.devui-button--outline--danger:disabled {
    opacity: .8
}

.devui-button--text {
    padding: 0
}

.devui-button--text--secondary {
    color: var(--devui-text, #252b3a)
}

.devui-button--text--secondary:hover {
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button--text--secondary:focus {
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button--text--secondary:active {
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button--text--secondary:disabled {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-button--text--primary {
    color: var(--devui-brand-active, #526ecc)
}

.devui-button--text--primary:hover {
    color: var(--devui-link-active, #526ecc)
}

.devui-button--text--primary:focus {
    color: var(--devui-brand-active-focus, #344899)
}

.devui-button--text--primary:active {
    color: var(--devui-brand-active-focus, #344899)
}

.devui-button--text--primary:disabled {
    opacity: .8
}

.devui-button--text--danger {
    color: var(--devui-contrast, #c7000b)
}

.devui-button--text--danger:hover,.devui-button--text--danger:focus,.devui-button--text--danger:active,.devui-button--text--danger:disabled {
    opacity: .8
}

.devui-button--sm {
    padding: var(--devui-btn-sm-padding, 0 16px);
    height: 24px;
    font-size: var(--devui-font-size-sm, 12px);
    min-width: 56px
}

.devui-button--lg {
    padding: var(--devui-btn-lg-padding, 0 24px);
    height: 40px;
    font-size: var(--devui-font-size-lg, 14px);
    min-width: 72px
}

.devui-button.devui-button__icon:not(.devui-button--solid):hover,.devui-button.devui-button__icon:not(.devui-button--solid):focus {
    border: 1px solid var(--devui-list-item-hover-bg, #f2f2f3);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-button.devui-button__icon:not(.devui-button--solid):disabled {
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap {
    color: var(--devui-text, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix {
    color: var(--devui-text-weak, #575d6c)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover {
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix {
    color: var(--devui-icon-fill-active, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .button-content {
    color: var(--devui-brand, #5e7ce0)
}

.devui-button--circle {
    border-radius: 100%
}

.devui-button--round {
    border-radius: 20px
}

.devui-loading .devui-loading-default-spinner div {
    background-color: var(--devui-text, #252b3a)
}

.devui-button {
    transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: solid
}

.devui-button.devui-button__icon {
    padding: 8px;
    line-height: 1em;
    min-width: unset
}

.devui-button.devui-button__icon:not(.devui-button--circle) {
    border: 1px solid transparent
}

.devui-button.devui-button__icon.devui-button--sm {
    padding: 4px;
    min-width: 24px
}

.devui-button.devui-button__icon.devui-button--lg {
    min-width: 32px
}

.devui-button.devui-button__icon.devui-button--lg .icon {
    font-size: var(--devui-font-size-icon, 16px)
}

.devui-button.devui-button__icon.devui-button--circle {
    width: 32px
}

.devui-button.devui-button__icon.devui-button--circle.devui-button--sm {
    width: 24px
}

.devui-button.devui-button__icon.devui-button--circle.devui-button--lg {
    width: 40px
}

.devui-button:not(.devui-button__icon) .icon-fix {
    font-size: var(--devui-font-size-icon, 16px)
}

.devui-button__icon-fix {
    position: relative;
    font-size: var(--devui-font-size, 12px)
}

.button-content {
    display: inline-block;
    position: relative
}

.clear-right-5 {
    margin-right: 5px
}

.loading-icon__container {
    display: inline-flex;
    align-items: center;
    margin-right: 5px
}

.loading-icon__container .button-icon-loading {
    animation: rotating 1.5s linear infinite
}

@keyframes rotating {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(180deg)
    }
}

@keyframes waterWave {
    0% {
        opacity: .2;
        width: 30px;
        height: 30px
    }

    to {
        opacity: 0;
        width: 200px;
        height: 200px
    }
}

.devui-button-group {
    display: flex
}

.devui-button-group>* {
    position: relative
}

.devui-button-group>*:not(:first-child),.devui-button-group>*:not(:first-child) .devui-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px
}

.devui-button-group>*:not(:first-child).devui-button--solid--primary,.devui-button-group>*:not(:first-child) .devui-button.devui-button--solid--primary {
    border-left: 1px solid var(--devui-brand-hover, #7693f5);
    margin-left: 0
}

.devui-button-group>*:not(:last-child),.devui-button-group>*:not(:last-child) .devui-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.devui-button-group>*:hover,.devui-button-group>*:active {
    z-index: 1
}

.devui-button-group>*:focus-within {
    z-index: 1
}

.devui-card {
    position: relative;
    display: block;
    padding: 16px 20px;
    border-radius: var(--devui-border-radius-card, 8px);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-card__title {
    display: block;
    font-size: var(--devui-font-size-card-title, 14px);
    font-weight: 600;
    color: var(--devui-text, #252b3a)
}

.devui-card__subtitle {
    display: block;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text-stress, #575d6c)
}

.devui-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--card-block-space, 16px)
}

.devui-card__avatar {
    margin-right: var(--card-block-space, 16px)
}

.devui-card__content {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f)
}

.devui-card__actions {
    margin-top: var(--card-block-space, 16px);
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.devui-card__title+.devui-card__subtitle {
    margin-top: var(--card-ele-space, 8px)
}

.devui-card__actions--align-end {
    justify-content: flex-end
}

.devui-card__actions--align-spaceBetween {
    justify-content: space-between
}

.devui-card__meta {
    width: calc(100% + 40px);
    margin: 0 -20px var(--card-block-space, 16px) -20px;
    height: auto
}

.devui-card__meta:first-child {
    margin-top: -var(--card-block-space,16px)
}

.devui-card__shadow--hover:hover,.devui-card__shadow--always {
    box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    transform: translateY(-5px)
}

.devui-carousel {
    display: block;
    position: relative
}

.devui-carousel .devui-carousel__arrow {
    position: absolute;
    width: 100%;
    top: 50%
}

.devui-carousel .devui-carousel__arrow .arrow-left {
    position: absolute;
    top: -18px;
    z-index: 2;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    left: 10px
}

.devui-carousel .devui-carousel__arrow .arrow-left:hover {
    background: var(--devui-area, #f5f5f5)
}

.devui-carousel .devui-carousel__arrow .arrow-left svg polygon {
    fill: var(--devui-text, #252b3a)
}

.devui-carousel .devui-carousel__arrow .arrow-right {
    position: absolute;
    top: -18px;
    z-index: 2;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    right: 10px
}

.devui-carousel .devui-carousel__arrow .arrow-right:hover {
    background: var(--devui-area, #f5f5f5)
}

.devui-carousel .devui-carousel__arrow .arrow-right svg polygon {
    fill: var(--devui-text, #252b3a)
}

.devui-carousel .devui-carousel__item-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%
}

.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container {
    display: flex;
    height: 100%;
    position: relative
}

.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item {
    flex: 1;
    position: relative;
    height: 100%
}

.devui-carousel .devui-carousel__dots {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    list-style: none
}

.devui-carousel .devui-carousel__dots.bottom {
    bottom: 8px
}

.devui-carousel .devui-carousel__dots.top {
    top: 8px
}

.devui-carousel .devui-carousel__dots .dot-item {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 8px;
    background: var(--devui-icon-fill, #71757f)
}

.devui-carousel .devui-carousel__dots .dot-item:hover {
    cursor: pointer;
    background: var(--devui-icon-fill-hover, #252b3a)
}

.devui-carousel .devui-carousel__dots .dot-item.active {
    width: 24px;
    background: var(--devui-icon-fill-active, #252b3a);
    transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .devui-carousel__arrow .arrow-right {
    transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-cascader__li.dropdown-item {
    height: 36px;
    padding: 8px 12px;
    color: var(--devui-text, #252b3a);
    cursor: pointer;
    border-radius: var(--devui-border-radius, 2px);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.devui-cascader__li .cascader-li__wraper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.devui-cascader__li .dropdown-item-label {
    display: inline-block;
    flex: 1;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--devui-font-size, 12px)
}

.devui-cascader__li.leaf-active {
    background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-cascader__li.leaf-active span {
    color: var(--devui-brand-active, #526ecc)
}

.devui-cascader__li.disabled {
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-cascader__li.disabled .dropdown-item-label {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-cascader__li .cascader-li__checkbox {
    margin-right: 4px
}

.devui-cascader__li .cascader-li__icon {
    margin-right: 4px;
    font-size: var(--devui-font-size-icon, 16px);
    color: var(--devui-text, #252b3a);
    line-height: 16px;
    height: 16px
}

.devui-cascader__li .cascader-li__icon.disabled {
    color: var(--devui-disabled-text, #cfd0d3)!important
}

.devui-checkbox {
    position: relative;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
    height: 100%;
    margin: 0
}

.devui-checkbox .devui-checkbox__tick-wrap {
    position: absolute;
    width: 14px;
    height: 14px
}

.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick {
    stroke: var(--devui-light-text, #ffffff);
    stroke-dasharray: 13 13;
    stroke-dashoffset: 13;
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: scale(1);
    transition: stroke-dashoffset var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color) {
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered {
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.active:not(.disabled) .devui-checkbox__material {
    background-size: 100% 100%;
    transition: background-size .2s ease-in-out,border-color .2s ease-in-out
}

.devui-checkbox.unchecked:not(.disabled):hover .devui-checkbox__material:not(.custom-color) {
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color) {
    background-size: 0% 0%;
    transition: background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color {
    background-size: 0% 0%;
    transition: background-size .2s ease-in-out,border-color .2s ease-in-out
}

.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color) {
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg {
    opacity: 1;
    transform: scale(.4288);
    transition: transform .2s cubic-bezier(.755,.05,.855,.06);
    background-color: var(--devui-light-text, #ffffff)
}

.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg {
    opacity: 1;
    transform: scale(.4288);
    transition: transform .2s cubic-bezier(.755,.05,.855,.06);
    background-color: var(--devui-light-text, #ffffff)
}

.devui-checkbox .devui-checkbox__material {
    text-align: initial;
    height: 14px;
    width: 14px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid var(--devui-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background: linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/0;
    margin-right: 8px;
    vertical-align: text-bottom
}

.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background {
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label {
    margin-right: 0
}

.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg {
    display: inline-block;
    position: absolute;
    content: "";
    background-color: var(--devui-light-text, #ffffff);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scale(1);
    opacity: 0
}

.devui-checkbox .devui-checkbox__material>svg {
    width: 14px;
    height: 14px
}

.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover {
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus {
    background-color: var(--devui-brand-active-focus, #344899)
}

.devui-checkbox--glow-style .devui-checkbox__glow-box {
    position: absolute;
    width: 16px;
    height: 16px
}

.devui-checkbox--glow-style .devui-checkbox__glow-box .glow-bg {
    display: block;
    width: 16px;
    height: 16px;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--devui-border-radius, 2px);
    box-shadow: none;
    transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-checkbox--glow-style:not(.disabled):hover .glow-bg {
    box-shadow: 0 0 0 6px var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-checkbox--checkbox-bordered .devui-checkbox__material {
    vertical-align: text-bottom!important
}

.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-xs .devui-checkbox__glow-box,.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-sm .devui-checkbox__glow-box {
    left: 11px
}

.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-md .devui-checkbox__glow-box,.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-lg .devui-checkbox__glow-box {
    left: 12px
}

.devui-checkbox__input {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none
}

.devui-checkbox label {
    position: relative;
    font-weight: 400;
    height: 16px;
    line-height: 16px;
    cursor: pointer;
    color: var(--devui-text, #252b3a);
    margin: 0;
    display: flex;
    align-items: center
}

.devui-checkbox label.devui-checkbox--lg {
    display: flex;
    align-items: center;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material {
    width: 18px;
    height: 18px
}

.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg {
    width: 18px;
    height: 18px
}

.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered {
    height: 40px;
    padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--md {
    display: flex;
    align-items: center;
    font-size: var(--devui-font-size-md, 12px)
}

.devui-checkbox label.devui-checkbox--md .devui-checkbox__material {
    width: 16px;
    height: 16px
}

.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg {
    width: 16px;
    height: 16px
}

.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered {
    height: 32px;
    padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--sm {
    display: flex;
    align-items: center;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material {
    width: 14px;
    height: 14px
}

.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg {
    width: 14px;
    height: 14px
}

.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered {
    height: 24px;
    padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--bordered {
    border: 1px solid var(--devui-disabled-line, #dfe1e6);
    border-radius: var(--devui-border-radius, 2px)
}

.devui-checkbox label>span {
    display: inline-block;
    box-sizing: content-box;
    vertical-align: top!important
}

.devui-checkbox label>span.devui-checkbox__material {
    flex-shrink: 0
}

.devui-checkbox label>span.devui-checkbox__label-text {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.devui-checkbox.disabled label {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-checkbox.disabled .devui-checkbox__material {
    border-color: var(--devui-icon-fill-active-disabled, #beccfa);
    background-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-checkbox.disabled.unchecked .devui-checkbox__material {
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-checkbox.disabled.half-checked .devui-checkbox__material {
    background-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg {
    transform: scale(.4288);
    background-color: var(--devui-light-text, #ffffff);
    opacity: 1
}

.devui-checkbox.disabled.active svg polygon {
    fill: var(--devui-light-text, #ffffff)
}

.devui-checkbox--no-animation {
    transition: none!important
}

.devui-checkbox__column-margin {
    height: 28px;
    line-height: 28px
}

.devui-checkbox__wrap .devui-checkbox label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-checkbox__group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start
}

.devui-checkbox__group>* {
    margin-top: 8px
}

.devui-checkbox__group.is-row {
    flex-direction: row
}

.devui-checkbox__group.is-row div:not(:last-child) {
    margin-right: 20px
}

.devui-checkbox__group.is-column {
    flex-direction: column
}

.devui-checkbox-button {
    display: flex;
    align-items: center;
    position: relative
}

.devui-checkbox-button__input {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none
}

.devui-checkbox-button__content {
    font-size: 14px;
    color: var(--devui-text, #252b3a);
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid var(--devui-disabled-line, #dfe1e6);
    display: inline-block;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none
}

.devui-checkbox-button__content.devui-checkbox-button--lg {
    font-size: var(--devui-font-size-lg, 14px);
    padding: var(--devui-btn-lg-padding, 0 24px);
    height: 40px;
    line-height: 40px
}

.devui-checkbox-button__content.devui-checkbox-button--md {
    font-size: var(--devui-font-size-md, 12px);
    padding: var(--devui-btn-padding, 0 20px);
    height: 32px;
    line-height: 32px
}

.devui-checkbox-button__content.devui-checkbox-button--sm {
    font-size: var(--devui-font-size-sm, 12px);
    padding: var(--devui-btn-sm-padding, 0 16px);
    height: 24px;
    line-height: 24px
}

.devui-checkbox-button.active .devui-checkbox-button__content {
    color: #fff;
    background-color: var(--devui-brand, #5e7ce0);
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox-button.active.disabled .devui-checkbox-button__content {
    color: #fff;
    background-color: var(--devui-icon-fill-active-disabled, #beccfa);
    border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-checkbox-button.disabled .devui-checkbox-button__content {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: #fff;
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-checkbox__group.is-row .devui-checkbox-button__content {
    border-left: none;
    box-shadow: -1px 0 0 0 var(--devui-disabled-line, #dfe1e6)
}

.devui-checkbox__group.is-row .devui-checkbox-button:first-child .devui-checkbox-button__content {
    border-top-left-radius: var(--devui-border-radius, 2px);
    border-bottom-left-radius: var(--devui-border-radius, 2px);
    border-left: 1px solid var(--devui-disabled-line, #dfe1e6);
    box-shadow: none
}

.devui-checkbox__group.is-row .devui-checkbox-button:last-child .devui-checkbox-button__content {
    border-top-right-radius: var(--devui-border-radius, 2px);
    border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-checkbox__group.is-column .devui-checkbox-button {
    width: 100%;
    margin-top: 0
}

.devui-checkbox__group.is-column .devui-checkbox-button__content {
    width: 100%;
    border-top: none;
    box-shadow: 0 -1px 0 0 var(--devui-disabled-line, #dfe1e6)
}

.devui-checkbox__group.is-column .devui-checkbox-button:first-child .devui-checkbox-button__content {
    border-top-left-radius: var(--devui-border-radius, 2px);
    border-top-right-radius: var(--devui-border-radius, 2px);
    border-top: 1px solid var(--devui-disabled-line, #dfe1e6);
    box-shadow: none
}

.devui-checkbox__group.is-column .devui-checkbox-button:last-child .devui-checkbox-button__content {
    border-bottom-left-radius: var(--devui-border-radius, 2px);
    border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-cascader__ul {
    height: 180px;
    background: var(--devui-connected-overlay-bg, #ffffff);
    display: block;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
    padding: 12px
}

.devui-cascader__drop-no-data {
    color: var(--devui-disabled-text, #cfd0d3);
    padding: 8px;
    display: block;
    height: 36px;
    line-height: 36px;
    overflow-y: hidden;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    font-size: var(--devui-font-size, 12px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column
}

.devui-cascader-tag {
    margin: 2px 4px 2px 0;
    display: inline-block;
    position: relative;
    align-items: center;
    padding: 0 8px;
    background-color: var(--devui-label-bg, #e9edfa);
    border-radius: var(--devui-border-radius, 2px);
    border: 0 solid inherit
}

.devui-cascader-tag span {
    min-height: 20px;
    line-height: 20px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text, #252b3a);
    position: relative;
    cursor: default
}

.devui-cascader-tag__close {
    margin-left: 12px;
    font-size: var(--devui-font-size, 12px);
    cursor: pointer;
    color: #fff;
    width: 14px;
    height: 14px;
    line-height: 14px;
    background-color: var(--devui-line, #d7d8da);
    border-radius: 50%;
    display: inline-block;
    text-align: center
}

.devui-cascader-tag__close:hover {
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tags-input {
    flex: 1;
    padding: 1px 20px 1px 4px;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    outline: none;
    background-color: var(--devui-base-bg, #ffffff);
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-tags-box {
    width: 100%;
    overflow: auto;
    min-height: 28px;
    max-height: 56px;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.devui-tags-placeholder {
    font-size: var(--devui-font-size, 12px);
    line-height: 22px;
    margin-left: 6px;
    color: var(--devui-placeholder, #babbc0)
}

.devui-input {
    width: 100%;
    height: 32px;
    font-size: var(--devui-font-size, 12px)
}

.devui-input__wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
    height: 100%
}

.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input__wrapper.devui-input--glow-style:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-input--focus:not(.devui-input--error) {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input--focus.devui-input--glow-style:not(.devui-input--error) {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-input--disabled:hover {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-input--disabled .devui-input__inner {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-input--error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-input--sm {
    height: 26px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-input--sm .devui-input__clear--icon {
    width: 14px;
    height: 14px
}

.devui-input--lg {
    height: 46px;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-input--lg .devui-input__clear--icon {
    width: 18px;
    height: 18px
}

.devui-input--feedback {
    padding-right: 28px
}

.devui-input__inner {
    width: 100%;
    height: 100%;
    color: var(--devui-text, #252b3a);
    font-size: inherit;
    padding: 4px 0;
    border: none;
    background: none;
    outline: none;
    box-sizing: border-box
}

.devui-input__inner::placeholder {
    color: var(--devui-placeholder, #babbc0)
}

.devui-input--prepend .devui-input__wrapper {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.devui-input--append .devui-input__wrapper {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.devui-input-slot {
    display: inline-flex;
    width: 100%;
    align-items: stretch
}

.devui-input-slot__prepend,.devui-input-slot__append {
    color: var(--devui-text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 0 20px;
    white-space: nowrap;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff)
}

.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select .devui-select__selection {
    border: none!important;
    background-color: transparent!important;
    color: inherit
}

.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select__selection {
    margin: 0 -20px
}

.devui-input-slot__prepend {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.devui-input-slot__append {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.devui-input-slot__prefix,.devui-input-slot__suffix {
    display: inline-flex;
    white-space: nowrap;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center
}

.devui-input-slot__prefix>* {
    margin-right: 8px
}

.devui-input-slot__suffix>* {
    margin-left: 8px
}

.devui-input__clear--icon,.devui-input__password--icon {
    cursor: pointer
}

.devui-input__clear--icon path {
    fill: var(--devui-shape-icon-fill, #d7d8da);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-input__clear--icon:hover path {
    fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-input--gray-style:not(.devui-input--disabled) .devui-input__wrapper:not(.devui-input--error) {
    background: #f5f5f5;
    border-color: #f5f5f5
}

.devui-input--gray-style:not(.devui-input--disabled) .devui-input__wrapper:not(.devui-input--error):hover {
    background: #ebebeb;
    border-color: #ebebeb
}

body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill,body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:hover,body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:focus,body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
    box-shadow: 0 0 0 1000px transparent inset!important;
    caret-color: #fff
}

body[ui-theme=galaxy-theme] .devui-input__inner:-internal-autofill-previewed,body[ui-theme=galaxy-theme] .devui-input__inner:-internal-autofill-selected {
    -webkit-text-fill-color: var(--devui-text, #252b3a);
    transition: background-color 99999s ease-out .5s
}

.devui-cascader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative
}

.devui-cascader>div:nth-child(1) {
    width: 100%
}

.devui-cascader__icon {
    position: absolute;
    right: 5px;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.devui-cascader__icon .icon {
    margin: 0
}

.devui-cascader__close .close-icon-container {
    width: 14px;
    height: 14px;
    line-height: 14px;
    cursor: pointer
}

.devui-cascader__close .close-icon-container svg {
    width: 14px;
    height: 14px
}

.devui-cascader__close .close-icon-container svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-cascader__close .close-icon-container svg:hover path {
    fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-cascader__disbaled .icon {
    color: var(--devui-disabled-text, #cfd0d3)!important
}

.devui-cascader input {
    width: 100%;
    padding-right: 16px
}

.devui-cascader__drop-menu-wrapper {
    display: block;
    font-size: 0;
    white-space: nowrap;
    padding: 0
}

.devui-cascader--drop-icon-animation {
    transition: transform .2s linear
}

.devui-cascader--drop-icon-animation svg path {
    fill: var(--devui-text, #252b3a)
}

.devui-cascader__drop-menu-animation {
    transition: opacity .2s ease-in-out,transform .2s ease-in-out
}

.devui-cascader__dropdown-menu {
    width: auto;
    padding-bottom: 0;
    display: flex;
    justify-content: "flex-start";
    align-items: center
}

.devui-cascader__panel {
    padding: 12px;
    max-height: 300px;
    overflow-y: auto
}

.devui-cascader__suggest-list {
    height: 32px;
    padding: 8px 12px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 400;
    font-size: var(--devui-font-size, 12px);
    text-align: left;
    border-radius: var(--devui-border-radius, 2px)
}

.devui-cascader__suggest-list:hover {
    color: var(--devui-brand-active, #526ecc);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-cascader__dropdown--open .devui-cascader__icon {
    transform: rotate(180deg)
}

.devui-cascader--fade-bottom-enter-from,.devui-cascader--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-cascader--fade-bottom-enter-to,.devui-cascader--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-cascader--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-cascader--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-cascader--fade-top-enter-from,.devui-cascader--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-cascader--fade-top-enter-to,.devui-cascader--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-cascader--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-cascader--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-tag {
    display: inline-block
}

.devui-tag .devui-tag__item {
    display: block;
    position: relative;
    padding: 0 8px;
    height: 20px;
    border: 1px solid;
    border-radius: var(--devui-border-radius, 2px);
    font-size: var(--devui-font-size, 12px);
    line-height: 20px;
    cursor: default
}

.devui-tag .devui-tag__item.devui-tag--default {
    border: 0;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-default-bg, #f7f8fa)
}

.devui-tag .devui-tag__item.devui-tag--primary {
    color: var(--devui-primary, #5e7ce0);
    background-color: var(--devui-primary-bg, #f2f5fc)
}

.devui-tag .devui-tag__item.devui-tag--success {
    color: var(--devui-success, #50d4ab);
    background-color: var(--devui-success-bg, #cffcee)
}

.devui-tag .devui-tag__item.devui-tag--warning {
    color: var(--devui-warning, #fac20a);
    background-color: var(--devui-warning-bg, #ffe1c7)
}

.devui-tag .devui-tag__item.devui-tag--danger {
    color: var(--devui-danger, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-tag .devui-tag__item.devui-tag--colorful {
    background-color: #fff
}

.devui-tag .devui-tag__item.devui-tag--deletable {
    padding-right: 32px
}

.devui-tag .devui-tag__item.devui-tag--lg {
    font-size: var(--devui-font-size-lg, 14px);
    height: 32px;
    line-height: 30px
}

.devui-tag .devui-tag__item.devui-tag--md {
    font-size: var(--devui-font-size-lg, 14px);
    height: 28px;
    line-height: 26px
}

.devui-tag .devui-tag__item.devui-tag--sm {
    font-size: var(--devui-font-size-sm, 12px);
    height: 24px;
    line-height: 22px
}

.devui-tag .remove-button {
    display: inline-block;
    margin-left: 12px;
    font-size: var(--devui-font-size-icon, 16px);
    cursor: pointer;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.devui-tag .remove-button i {
    vertical-align: 0
}

.devui-input-number {
    position: relative;
    display: inline-block;
    width: 80px
}

.devui-input-number:hover .devui-input-number__input-box:not(.disabled) {
    border: 1px solid var(--devui-form-control-line-hover, #9b9fa8);
    padding-right: 24px
}

.devui-input-number:hover .devui-input-number__control-buttons:not(.disabled) {
    display: flex;
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input-number:focus-within .devui-input-number__input-box:not(.disabled) {
    border: 1px solid var(--devui-form-control-line-active, #5e7ce0);
    padding-right: 24px
}

.devui-input-number:focus-within .devui-input-number__control-buttons:not(.disabled) {
    display: flex;
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__input-box:not(.disabled) {
    border-color: var(--devui-form-control-line, #d7d8da);
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons:not(.disabled) {
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__input-box--error:not(.disabled) {
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons--error:not(.disabled) {
    border-color: var(--devui-danger-line, #f66f6a);
    border-left-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons--error:not(.disabled) span {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__input-box:not(.disabled) {
    border-color: var(--devui-form-control-line-active, #5e7ce0);
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons:not(.disabled) {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__input-box--error:not(.disabled) {
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons--error:not(.disabled) {
    border-color: var(--devui-danger-line, #f66f6a);
    border-left-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons--error:not(.disabled) span {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-input-number .devui-input-number__input-box {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    line-height: var(--devui-line-height-base, 1.5);
    padding: 4px 8px;
    display: block;
    font-size: var(--devui-font-size, 12px);
    outline: none;
    border-radius: var(--devui-border-radius, 2px);
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    cursor: text;
    -moz-appearance: textfield;
    transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-input-number .devui-input-number__input-box:not(.disabled) {
    background-color: var(--devui-base-bg, #ffffff);
    border-color: var(--devui-line, #d7d8da);
    color: var(--devui-text, #252b3a)
}

.devui-input-number .devui-input-number__input-box::-webkit-inner-spin-button,.devui-input-number .devui-input-number__input-box::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.devui-input-number .devui-input-number__control-buttons {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    width: 22px;
    height: 100%;
    line-height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    border-left-color: var(--devui-line, #d7d8da);
    border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0
}

.devui-input-number .devui-input-number__control-buttons.disabled {
    border-left-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-input-number .devui-input-number__control-buttons .control-button {
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    height: 50%;
    line-height: 50%;
    border-width: 0 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--devui-base-bg, #ffffff);
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-input-number .devui-input-number__control-buttons .control-button.control-inc svg {
    position: relative;
    top: 2px;
    transform: rotate(180deg)
}

.devui-input-number .devui-input-number__control-buttons .control-button.control-dec svg {
    position: relative;
    bottom: 2px
}

.devui-input-number .devui-input-number__control-buttons .control-button svg path {
    fill: var(--devui-text-weak, #575d6c)
}

.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled) {
    cursor: pointer
}

.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled):hover>svg path {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-input-number .devui-input-number__control-buttons .control-button.disabled>svg path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-input-number .devui-input-number__input-wrap {
    height: 100%
}

.devui-input-number .disabled {
    cursor: not-allowed
}

.devui-input-number--lg {
    height: 40px
}

.devui-input-number--lg .devui-input-number__input-box {
    font-size: var(--devui-font-size-lg, 14px);
    height: 100%
}

.devui-input-number--lg .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
    width: 20px;
    height: 20px
}

.devui-input-number--md {
    height: 32px
}

.devui-input-number--md .devui-input-number__input-box {
    font-size: var(--devui-font-size, 12px);
    height: 100%
}

.devui-input-number--md .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
    width: 18px;
    height: 18px
}

.devui-input-number--sm {
    height: 24px
}

.devui-input-number--sm .devui-input-number__input-box {
    font-size: var(--devui-font-size-sm, 12px);
    height: 100%
}

.devui-input-number--sm .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
    width: 16px;
    height: 16px
}

.dp-category-search-container {
    position: relative;
    border-radius: var(--devui-border-radius, 2px);
    width: 100%;
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    background: transparent;
    transition: border var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    background-color: var(--devui-base-bg, #ffffff);
    border: 1px solid var(--devui-line, #d7d8da)
}

.dp-category-search-container ul,.dp-category-search-container li {
    margin: 0;
    padding: 0;
    list-style: none
}

.dp-category-search-container.container-hover>.dp-category-search-icon svg p path {
    fill: var(--devui-icon-fill-hover, #252b3a)
}

.dp-category-search-container.dp-gray-style {
    background-color: var(--devui-gray-form-control-bg, #f5f5f5);
    border-color: transparent;
    transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.dp-category-search-container.dp-gray-style:hover {
    background-color: var(--devui-gray-form-control-hover-bg, #ebebeb)
}

.dp-category-search-container.dp-gray-style:focus-within {
    background-color: var(--devui-base-bg, #ffffff);
    border-color: var(--devui-brand, #5e7ce0)
}

.dp-category-search-container.dp-gray-style .dp-category-search-input input.dp-category-search-toggle {
    background-color: transparent!important
}

.dp-category-search-container .dp-category-search-toggle {
    color: var(--devui-text, #252b3a)
}

.dp-category-search-container .dp-category-search-line-container {
    width: 100%;
    height: 32px;
    overflow: hidden
}

.dp-category-search-container .dp-category-search-line-container:hover {
    overflow-x: auto;
    overflow-y: overlay
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 30px;
    position: relative
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line>li {
    display: flex;
    align-items: center;
    flex-grow: 0;
    white-space: nowrap;
    height: 100%
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input {
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
    align-items: center;
    min-width: 160px;
    padding-right: 20px
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input input {
    min-width: 240px;
    width: 100%;
    height: 32px;
    font-size: var(--devui-font-size-sm, 12px)
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input .dp-category-search-toggle {
    padding-left: 0
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input .dp-category-search-keyword-in-category {
    overflow: visible
}

.dp-category-search-container input {
    border: none;
    background: transparent;
    outline: none
}

.dp-category-search-container input::placeholder {
    color: var(--devui-placeholder, #babbc0)
}

.dp-category-search-container input:focus {
    outline: none
}

.dp-category-search-container .dp-input-container {
    display: flex;
    flex: 1
}

.dp-category-search-container .dp-category-search-extended-container {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    height: 16px;
    margin: 8px 0;
    border-left: 1px solid var(--devui-line, #d7d8da);
    padding-left: 8px
}

.dp-category-search-icon {
    display: flex;
    padding-right: 8px;
    align-items: center;
    height: 16px;
    cursor: pointer
}

.dp-category-search-icon svg g path {
    outline: none;
    fill: var(--devui-icon-fill, #71757f);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.dp-category-search-icon.disabled {
    cursor: not-allowed
}

.dp-category-search-icon.disabled svg g path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.dp-category-search-icon:not(.disabled):hover svg g path {
    fill: var(--devui-icon-fill-hover, #252b3a)
}

li.dp-tag-item {
    display: inline-block;
    margin-right: 4px
}

li.dp-tag-item .devui-tag>.devui-tag__item {
    display: block!important
}

li.dp-tag-item .devui-tag>.devui-tag__item .dp-category-search-multi-tag>span,li.dp-tag-item .devui-tag>.devui-tag__item>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px
}

li.dp-tag-item:first-child {
    margin-left: 4px
}

li.dp-tag-item:focus {
    outline: none
}

li.dp-tag-item .dp-color-block-split-line {
    color: var(--devui-aide-text, #71757f)
}

li.dp-tag-item .dp-color-block-sm {
    width: 8px;
    height: 8px;
    border-radius: var(--devui-border-radius, 2px);
    margin-right: 4px;
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: middle
}

.dp-category-search-dropdown {
    min-width: 200px;
    overflow-x: auto;
    white-space: nowrap
}

.dp-category-search-dropdown ul,.dp-category-search-dropdown li {
    padding: 0;
    margin: 0;
    list-style: none
}

.dp-dropdown-menu-template {
    max-width: 300px;
    max-height: 352px;
    padding: 12px!important;
    overflow: auto
}

.dp-dropdown-menu-template.dp-category-search-keyword-in-category {
    padding: 0!important
}

.dp-dropdown-menu-template .dp-dropdown-item {
    display: block;
    width: 100%;
    max-height: 36px;
    line-height: 20px;
    padding: 8px 12px!important;
    border-radius: var(--devui-border-radius, 2px);
    border: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    cursor: pointer
}

.dp-dropdown-menu-template .dp-dropdown-item:not(:first-child) {
    margin-top: 4px
}

.dp-dropdown-menu-template .dp-dropdown-item:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.dp-dropdown-menu-template .dp-dropdown-item.active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.dp-dropdown-menu-template .dp-dropdown-item .icon-search {
    margin-right: 4px
}

.dp-dropdown-menu-template .dp-dividing-line {
    height: 1px;
    width: 100%;
    background-color: var(--devui-dividing-line, #f2f2f3);
    margin-top: 4px
}

.dp-dropdown-menu-template .dp-dropdown-menu-tip {
    cursor: text;
    padding: 12px 12px 0;
    pointer-events: none;
    color: var(--devui-aide-text, #71757f)
}

.dp-dropdown-menu-template .dp-color-block {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: var(--devui-border-radius, 2px);
    position: relative;
    top: -1px;
    vertical-align: middle;
    display: inline-block
}

.dp-dropdown-menu-template .devui-checkbox__group,.dp-dropdown-menu-template .devui-checkbox__column-margin,.dp-dropdown-menu-template .devui-checkbox,.dp-dropdown-menu-template .devui-checkbox label,.dp-dropdown-menu-template .devui-checkbox__label-text {
    max-width: 100%
}

.dp-save-panel {
    width: 400px;
    height: auto
}

.dp-save-panel .dp-save-panel-title {
    display: flex;
    justify-content: space-between;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--devui-font-size-page-title, 16px)
}

.dp-save-panel .dp-save-filter-name {
    padding: 16px 20px
}

.dp-save-panel .dp-save-filter-name .devui-form__item--vertical {
    margin-bottom: 0
}

.dp-save-panel .dp-save-panel-operation-area {
    padding-bottom: 12px;
    display: flex;
    justify-content: center
}

.dp-save-panel .dp-save-panel-operation-area .devui-button:not(:first-child) {
    margin-left: 16px
}

.dp-dropdown-menu-fix {
    min-width: 200px;
    margin-left: 0;
    overflow-y: auto;
    white-space: nowrap
}

.dp-dropdown-menu-fix.max-height {
    max-height: 405px
}

.dp-dropdown-menu-fix .devui-form .devui-form__item--horizontal {
    margin: 16px 8px
}

.dp-dropdown-menu-fix .devui-form .devui-form__label {
    display: none
}

.dp-dropdown-menu-fix .devui-form .devui-form__control--horizontal {
    margin-left: 0
}

.dp-dropdown-menu-fix .devui-input-number {
    width: 70px
}

.dp-selected-tags-list ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    max-height: 390px;
    overflow: auto
}

.dp-selected-tags-list ul li.dp-tag-item {
    display: flex;
    flex-grow: 0;
    flex-flow: row wrap;
    margin: 2px 4px 2px 0
}

.dp-selected-tags-list ul li.dp-tag-item:last-child {
    margin-right: 0
}

.dp-dropdown-operation-area {
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
    padding-top: 8px;
    margin: 8px 0;
    display: flex;
    justify-content: center
}

.dp-dropdown-operation-area>.devui-button:first-child {
    margin-right: 8px
}

.dp-input-number-operation-area {
    padding: 16px 16px 8px;
    display: flex;
    justify-content: space-evenly
}

.dp-no-data-text {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text, #252b3a);
    padding: 8px 0;
    text-align: center
}

.dp-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.dp-scrollbar::-webkit-scrollbar-track {
    background-color: transparent
}

.dp-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--devui-line, #d7d8da)
}

.dp-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--devui-placeholder, #babbc0)
}

.dp-code-editor {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

.dp-code-editor div.icon-pointer {
    cursor: pointer
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
    color: #24292e;
    background: #fff
}

.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_ {
    color: #d73a49
}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_ {
    color: #6f42c1
}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id {
    color: #005cc5
}

.hljs-regexp,.hljs-string,.hljs-meta .hljs-string {
    color: #032f62
}

.hljs-built_in,.hljs-symbol {
    color: #e36209
}

.hljs-comment,.hljs-code,.hljs-formula {
    color: #6a737d
}

.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo {
    color: #22863a
}

.hljs-subst {
    color: #24292e
}

.hljs-section {
    color: #005cc5;
    font-weight: 700
}

.hljs-bullet {
    color: #735c0f
}

.hljs-emphasis {
    color: #24292e;
    font-style: italic
}

.hljs-strong {
    color: #24292e;
    font-weight: 700
}

.hljs-addition {
    color: #22863a;
    background-color: #f0fff4
}

.hljs-deletion {
    color: #b31d28;
    background-color: #ffeef0
}

:host,:root {
    --d2h-bg-color: #fff;
    --d2h-border-color: #ddd;
    --d2h-dim-color: rgba(0,0,0,.3);
    --d2h-line-border-color: #eee;
    --d2h-file-header-bg-color: #f7f7f7;
    --d2h-file-header-border-color: #d8d8d8;
    --d2h-empty-placeholder-bg-color: #f1f1f1;
    --d2h-empty-placeholder-border-color: #e1e1e1;
    --d2h-selected-color: #c8e1ff;
    --d2h-ins-bg-color: #dfd;
    --d2h-ins-border-color: #b4e2b4;
    --d2h-ins-highlight-bg-color: #97f295;
    --d2h-ins-label-color: #399839;
    --d2h-del-bg-color: #fee8e9;
    --d2h-del-border-color: #e9aeae;
    --d2h-del-highlight-bg-color: #ffb6ba;
    --d2h-del-label-color: #c33;
    --d2h-change-del-color: #fdf2d0;
    --d2h-change-ins-color: #ded;
    --d2h-info-bg-color: #f8fafd;
    --d2h-info-border-color: #d5e4f2;
    --d2h-change-label-color: #d0b44c;
    --d2h-moved-label-color: #3572b0;
    --d2h-dark-color: #e6edf3;
    --d2h-dark-bg-color: #0d1117;
    --d2h-dark-border-color: #30363d;
    --d2h-dark-dim-color: #6e7681;
    --d2h-dark-line-border-color: #21262d;
    --d2h-dark-file-header-bg-color: #161b22;
    --d2h-dark-file-header-border-color: #30363d;
    --d2h-dark-empty-placeholder-bg-color: hsla(215,8%,47%,.1);
    --d2h-dark-empty-placeholder-border-color: #30363d;
    --d2h-dark-selected-color: rgba(56,139,253,.1);
    --d2h-dark-ins-bg-color: rgba(46,160,67,.15);
    --d2h-dark-ins-border-color: rgba(46,160,67,.4);
    --d2h-dark-ins-highlight-bg-color: rgba(46,160,67,.4);
    --d2h-dark-ins-label-color: #3fb950;
    --d2h-dark-del-bg-color: rgba(248,81,73,.1);
    --d2h-dark-del-border-color: rgba(248,81,73,.4);
    --d2h-dark-del-highlight-bg-color: rgba(248,81,73,.4);
    --d2h-dark-del-label-color: #f85149;
    --d2h-dark-change-del-color: rgba(210,153,34,.2);
    --d2h-dark-change-ins-color: rgba(46,160,67,.25);
    --d2h-dark-info-bg-color: rgba(56,139,253,.1);
    --d2h-dark-info-border-color: rgba(56,139,253,.4);
    --d2h-dark-change-label-color: #d29922;
    --d2h-dark-moved-label-color: #3572b0
}

.d2h-wrapper {
    text-align: left
}

.d2h-file-header {
    background-color: #f7f7f7;
    background-color: var(--d2h-file-header-bg-color);
    border-bottom: 1px solid #d8d8d8;
    border-bottom: 1px solid var(--d2h-file-header-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
    height: 35px;
    padding: 5px 10px
}

.d2h-file-header.d2h-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1
}

.d2h-file-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    margin-left: auto
}

.d2h-lines-added {
    border: 1px solid #b4e2b4;
    border: 1px solid var(--d2h-ins-border-color);
    border-radius: 5px 0 0 5px;
    color: #399839;
    color: var(--d2h-ins-label-color);
    padding: 2px;
    text-align: right;
    vertical-align: middle
}

.d2h-lines-deleted {
    border: 1px solid #e9aeae;
    border: 1px solid var(--d2h-del-border-color);
    border-radius: 0 5px 5px 0;
    color: #c33;
    color: var(--d2h-del-label-color);
    margin-left: 1px;
    padding: 2px;
    text-align: left;
    vertical-align: middle
}

.d2h-file-name-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15px;
    width: 100%
}

.d2h-file-name {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.d2h-file-wrapper {
    border: 1px solid #ddd;
    border: 1px solid var(--d2h-border-color);
    border-radius: 3px;
    margin-bottom: 1em
}

.d2h-file-collapse {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    cursor: pointer;
    display: none;
    font-size: 12px;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #ddd;
    border: 1px solid var(--d2h-border-color);
    border-radius: 3px;
    padding: 4px 8px
}

.d2h-file-collapse.d2h-selected {
    background-color: #c8e1ff;
    background-color: var(--d2h-selected-color)
}

.d2h-file-collapse-input {
    margin: 0 4px 0 0
}

.d2h-diff-table {
    border-collapse: collapse;
    font-family: Menlo,Consolas,monospace;
    font-size: 13px;
    width: 100%
}

.d2h-files-diff {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.d2h-file-diff {
    overflow-y: hidden
}

.d2h-file-diff.d2h-d-none,.d2h-files-diff.d2h-d-none {
    display: none
}

.d2h-file-side-diff {
    display: inline-block;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 50%
}

.d2h-code-line {
    padding: 0 8em;
    width: calc(100% - 16em)
}

.d2h-code-line,.d2h-code-side-line {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.d2h-code-side-line {
    padding: 0 4.5em;
    width: calc(100% - 9em)
}

.d2h-code-line-ctn {
    background: none;
    display: inline-block;
    padding: 0;
    word-wrap: normal;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    vertical-align: middle;
    white-space: pre;
    width: 100%
}

.d2h-code-line del,.d2h-code-side-line del {
    background-color: #ffb6ba;
    background-color: var(--d2h-del-highlight-bg-color)
}

.d2h-code-line del,.d2h-code-line ins,.d2h-code-side-line del,.d2h-code-side-line ins {
    border-radius: .2em;
    display: inline-block;
    margin-top: -1px;
    -webkit-text-decoration: none;
    text-decoration: none
}

.d2h-code-line ins,.d2h-code-side-line ins {
    background-color: #97f295;
    background-color: var(--d2h-ins-highlight-bg-color);
    text-align: left
}

.d2h-code-line-prefix {
    background: none;
    display: inline;
    padding: 0;
    word-wrap: normal;
    white-space: pre
}

.line-num1 {
    float: left
}

.line-num1,.line-num2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 .5em;
    text-overflow: ellipsis;
    width: 3.5em
}

.line-num2 {
    float: right
}

.d2h-code-linenumber {
    background-color: #fff;
    background-color: var(--d2h-bg-color);
    border: solid #eee;
    border: solid var(--d2h-line-border-color);
    border-width: 0 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #0000004d;
    color: var(--d2h-dim-color);
    cursor: pointer;
    display: inline-block;
    position: absolute;
    text-align: right;
    width: 7.5em
}

.d2h-code-linenumber:after {
    content: "​"
}

.d2h-code-side-linenumber {
    background-color: #fff;
    background-color: var(--d2h-bg-color);
    border: solid #eee;
    border: solid var(--d2h-line-border-color);
    border-width: 0 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #0000004d;
    color: var(--d2h-dim-color);
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0 .5em;
    position: absolute;
    text-align: right;
    text-overflow: ellipsis;
    width: 4em
}

.d2h-code-side-linenumber:after {
    content: "​"
}

.d2h-code-side-emptyplaceholder,.d2h-emptyplaceholder {
    background-color: #f1f1f1;
    background-color: var(--d2h-empty-placeholder-bg-color);
    border-color: #e1e1e1;
    border-color: var(--d2h-empty-placeholder-border-color)
}

.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.d2h-code-linenumber,.d2h-code-side-linenumber {
    direction: rtl
}

.d2h-del {
    background-color: #fee8e9;
    background-color: var(--d2h-del-bg-color);
    border-color: #e9aeae;
    border-color: var(--d2h-del-border-color)
}

.d2h-ins {
    background-color: #dfd;
    background-color: var(--d2h-ins-bg-color);
    border-color: #b4e2b4;
    border-color: var(--d2h-ins-border-color)
}

.d2h-info {
    background-color: #f8fafd;
    background-color: var(--d2h-info-bg-color);
    border-color: #d5e4f2;
    border-color: var(--d2h-info-border-color);
    color: #0000004d;
    color: var(--d2h-dim-color)
}

.d2h-file-diff .d2h-del.d2h-change {
    background-color: #fdf2d0;
    background-color: var(--d2h-change-del-color)
}

.d2h-file-diff .d2h-ins.d2h-change {
    background-color: #ded;
    background-color: var(--d2h-change-ins-color)
}

.d2h-file-list-wrapper {
    margin-bottom: 10px
}

.d2h-file-list-wrapper a {
    -webkit-text-decoration: none;
    text-decoration: none
}

.d2h-file-list-wrapper a,.d2h-file-list-wrapper a:visited {
    color: #3572b0;
    color: var(--d2h-moved-label-color)
}

.d2h-file-list-header {
    text-align: left
}

.d2h-file-list-title {
    font-weight: 700
}

.d2h-file-list-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left
}

.d2h-file-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0
}

.d2h-file-list>li {
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid var(--d2h-border-color);
    margin: 0;
    padding: 5px 10px
}

.d2h-file-list>li:last-child {
    border-bottom: none
}

.d2h-file-switch {
    cursor: pointer;
    display: none;
    font-size: 10px
}

.d2h-icon {
    margin-right: 10px;
    vertical-align: middle;
    fill: currentColor
}

.d2h-deleted {
    color: #c33;
    color: var(--d2h-del-label-color)
}

.d2h-added {
    color: #399839;
    color: var(--d2h-ins-label-color)
}

.d2h-changed {
    color: #d0b44c;
    color: var(--d2h-change-label-color)
}

.d2h-moved {
    color: #3572b0;
    color: var(--d2h-moved-label-color)
}

.d2h-tag {
    background-color: #fff;
    background-color: var(--d2h-bg-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 10px;
    margin-left: 5px;
    padding: 0 2px
}

.d2h-deleted-tag {
    border: 1px solid #c33;
    border: 1px solid var(--d2h-del-label-color)
}

.d2h-added-tag {
    border: 1px solid #399839;
    border: 1px solid var(--d2h-ins-label-color)
}

.d2h-changed-tag {
    border: 1px solid #d0b44c;
    border: 1px solid var(--d2h-change-label-color)
}

.d2h-moved-tag {
    border: 1px solid #3572b0;
    border: 1px solid var(--d2h-moved-label-color)
}

.d2h-dark-color-scheme {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    color: #e6edf3;
    color: var(--d2h-dark-color)
}

.d2h-dark-color-scheme .d2h-file-header {
    background-color: #161b22;
    background-color: var(--d2h-dark-file-header-bg-color);
    border-bottom: #30363d;
    border-bottom: var(--d2h-dark-file-header-border-color)
}

.d2h-dark-color-scheme .d2h-lines-added {
    border: 1px solid rgba(46,160,67,.4);
    border: 1px solid var(--d2h-dark-ins-border-color);
    color: #3fb950;
    color: var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-lines-deleted {
    border: 1px solid rgba(248,81,73,.4);
    border: 1px solid var(--d2h-dark-del-border-color);
    color: #f85149;
    color: var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-code-line del,.d2h-dark-color-scheme .d2h-code-side-line del {
    background-color: #f8514966;
    background-color: var(--d2h-dark-del-highlight-bg-color)
}

.d2h-dark-color-scheme .d2h-code-line ins,.d2h-dark-color-scheme .d2h-code-side-line ins {
    background-color: #2ea04366;
    background-color: var(--d2h-dark-ins-highlight-bg-color)
}

.d2h-dark-color-scheme .d2h-diff-tbody {
    border-color: #30363d;
    border-color: var(--d2h-dark-border-color)
}

.d2h-dark-color-scheme .d2h-code-side-linenumber {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    border-color: #21262d;
    border-color: var(--d2h-dark-line-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
    background-color: #6e76811a;
    background-color: var(--d2h-dark-empty-placeholder-bg-color);
    border-color: #30363d;
    border-color: var(--d2h-dark-empty-placeholder-border-color)
}

.d2h-dark-color-scheme .d2h-code-linenumber {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    border-color: #21262d;
    border-color: var(--d2h-dark-line-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-del {
    background-color: #f851491a;
    background-color: var(--d2h-dark-del-bg-color);
    border-color: #f8514966;
    border-color: var(--d2h-dark-del-border-color)
}

.d2h-dark-color-scheme .d2h-ins {
    background-color: #2ea04326;
    background-color: var(--d2h-dark-ins-bg-color);
    border-color: #2ea04366;
    border-color: var(--d2h-dark-ins-border-color)
}

.d2h-dark-color-scheme .d2h-info {
    background-color: #388bfd1a;
    background-color: var(--d2h-dark-info-bg-color);
    border-color: #388bfd66;
    border-color: var(--d2h-dark-info-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
    background-color: #d2992233;
    background-color: var(--d2h-dark-change-del-color)
}

.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
    background-color: #2ea04340;
    background-color: var(--d2h-dark-change-ins-color)
}

.d2h-dark-color-scheme .d2h-file-wrapper {
    border: 1px solid #30363d;
    border: 1px solid var(--d2h-dark-border-color)
}

.d2h-dark-color-scheme .d2h-file-collapse {
    border: 1px solid #0d1117;
    border: 1px solid var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
    background-color: #388bfd1a;
    background-color: var(--d2h-dark-selected-color)
}

.d2h-dark-color-scheme .d2h-file-list-wrapper a,.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
    color: #3572b0;
    color: var(--d2h-dark-moved-label-color)
}

.d2h-dark-color-scheme .d2h-file-list>li {
    border-bottom: 1px solid #0d1117;
    border-bottom: 1px solid var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-deleted {
    color: #f85149;
    color: var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-added {
    color: #3fb950;
    color: var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-changed {
    color: #d29922;
    color: var(--d2h-dark-change-label-color)
}

.d2h-dark-color-scheme .d2h-moved {
    color: #3572b0;
    color: var(--d2h-dark-moved-label-color)
}

.d2h-dark-color-scheme .d2h-tag {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-deleted-tag {
    border: 1px solid #f85149;
    border: 1px solid var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-added-tag {
    border: 1px solid #3fb950;
    border: 1px solid var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-changed-tag {
    border: 1px solid #d29922;
    border: 1px solid var(--d2h-dark-change-label-color)
}

.d2h-dark-color-scheme .d2h-moved-tag {
    border: 1px solid #3572b0;
    border: 1px solid var(--d2h-dark-moved-label-color)
}

@media (prefers-color-scheme: dark) {
    .d2h-auto-color-scheme {
        background-color:#0d1117;
        background-color: var(--d2h-dark-bg-color);
        color: #e6edf3;
        color: var(--d2h-dark-color)
    }

    .d2h-auto-color-scheme .d2h-file-header {
        background-color: #161b22;
        background-color: var(--d2h-dark-file-header-bg-color);
        border-bottom: #30363d;
        border-bottom: var(--d2h-dark-file-header-border-color)
    }

    .d2h-auto-color-scheme .d2h-lines-added {
        border: 1px solid rgba(46,160,67,.4);
        border: 1px solid var(--d2h-dark-ins-border-color);
        color: #3fb950;
        color: var(--d2h-dark-ins-label-color)
    }

    .d2h-auto-color-scheme .d2h-lines-deleted {
        border: 1px solid rgba(248,81,73,.4);
        border: 1px solid var(--d2h-dark-del-border-color);
        color: #f85149;
        color: var(--d2h-dark-del-label-color)
    }

    .d2h-auto-color-scheme .d2h-code-line del,.d2h-auto-color-scheme .d2h-code-side-line del {
        background-color: #f8514966;
        background-color: var(--d2h-dark-del-highlight-bg-color)
    }

    .d2h-auto-color-scheme .d2h-code-line ins,.d2h-auto-color-scheme .d2h-code-side-line ins {
        background-color: #2ea04366;
        background-color: var(--d2h-dark-ins-highlight-bg-color)
    }

    .d2h-auto-color-scheme .d2h-diff-tbody {
        border-color: #30363d;
        border-color: var(--d2h-dark-border-color)
    }

    .d2h-auto-color-scheme .d2h-code-side-linenumber {
        background-color: #0d1117;
        background-color: var(--d2h-dark-bg-color);
        border-color: #21262d;
        border-color: var(--d2h-dark-line-border-color);
        color: #6e7681;
        color: var(--d2h-dark-dim-color)
    }

    .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
        background-color: #6e76811a;
        background-color: var(--d2h-dark-empty-placeholder-bg-color);
        border-color: #30363d;
        border-color: var(--d2h-dark-empty-placeholder-border-color)
    }

    .d2h-auto-color-scheme .d2h-code-linenumber {
        background-color: #0d1117;
        background-color: var(--d2h-dark-bg-color);
        border-color: #21262d;
        border-color: var(--d2h-dark-line-border-color);
        color: #6e7681;
        color: var(--d2h-dark-dim-color)
    }

    .d2h-auto-color-scheme .d2h-del {
        background-color: #f851491a;
        background-color: var(--d2h-dark-del-bg-color);
        border-color: #f8514966;
        border-color: var(--d2h-dark-del-border-color)
    }

    .d2h-auto-color-scheme .d2h-ins {
        background-color: #2ea04326;
        background-color: var(--d2h-dark-ins-bg-color);
        border-color: #2ea04366;
        border-color: var(--d2h-dark-ins-border-color)
    }

    .d2h-auto-color-scheme .d2h-info {
        background-color: #388bfd1a;
        background-color: var(--d2h-dark-info-bg-color);
        border-color: #388bfd66;
        border-color: var(--d2h-dark-info-border-color);
        color: #6e7681;
        color: var(--d2h-dark-dim-color)
    }

    .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
        background-color: #d2992233;
        background-color: var(--d2h-dark-change-del-color)
    }

    .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
        background-color: #2ea04340;
        background-color: var(--d2h-dark-change-ins-color)
    }

    .d2h-auto-color-scheme .d2h-file-wrapper {
        border: 1px solid #30363d;
        border: 1px solid var(--d2h-dark-border-color)
    }

    .d2h-auto-color-scheme .d2h-file-collapse {
        border: 1px solid #0d1117;
        border: 1px solid var(--d2h-dark-bg-color)
    }

    .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
        background-color: #388bfd1a;
        background-color: var(--d2h-dark-selected-color)
    }

    .d2h-auto-color-scheme .d2h-file-list-wrapper a,.d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
        color: #3572b0;
        color: var(--d2h-dark-moved-label-color)
    }

    .d2h-auto-color-scheme .d2h-file-list>li {
        border-bottom: 1px solid #0d1117;
        border-bottom: 1px solid var(--d2h-dark-bg-color)
    }

    .d2h-dark-color-scheme .d2h-deleted {
        color: #f85149;
        color: var(--d2h-dark-del-label-color)
    }

    .d2h-auto-color-scheme .d2h-added {
        color: #3fb950;
        color: var(--d2h-dark-ins-label-color)
    }

    .d2h-auto-color-scheme .d2h-changed {
        color: #d29922;
        color: var(--d2h-dark-change-label-color)
    }

    .d2h-auto-color-scheme .d2h-moved {
        color: #3572b0;
        color: var(--d2h-dark-moved-label-color)
    }

    .d2h-auto-color-scheme .d2h-tag {
        background-color: #0d1117;
        background-color: var(--d2h-dark-bg-color)
    }

    .d2h-auto-color-scheme .d2h-deleted-tag {
        border: 1px solid #f85149;
        border: 1px solid var(--d2h-dark-del-label-color)
    }

    .d2h-auto-color-scheme .d2h-added-tag {
        border: 1px solid #3fb950;
        border: 1px solid var(--d2h-dark-ins-label-color)
    }

    .d2h-auto-color-scheme .d2h-changed-tag {
        border: 1px solid #d29922;
        border: 1px solid var(--d2h-dark-change-label-color)
    }

    .d2h-auto-color-scheme .d2h-moved-tag {
        border: 1px solid #3572b0;
        border: 1px solid var(--d2h-dark-moved-label-color)
    }
}

.devui-code-review {
    box-sizing: border-box;
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    border-radius: var(--devui-border-radius-card, 8px)
}

.devui-code-review__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-right: 20px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-radius: var(--devui-border-radius-card, 8px);
    background-color: var(--devui-global-bg-normal, #ffffff);
    cursor: pointer
}

.devui-code-review__header--unfold {
    border-radius: var(--devui-border-radius-card, 8px) var(--devui-border-radius-card, 8px) 0 0;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: inset 0 -1px 0 0 var(--devui-brand-foil, #f2f2f3)
}

.devui-code-review__header .diff-type {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    font-size: var(--devui-font-size-sm, 12px);
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
    border-radius: 8px 0;
    -webkit-user-select: none;
    user-select: none
}

.devui-code-review__header .diff-type.modify {
    color: #fa9841;
    background-color: #fa984133
}

.devui-code-review__header .diff-type.add {
    color: #3ac295;
    background-color: #3ac29533
}

.devui-code-review__header .diff-type.delete {
    color: #f66f6a;
    background-color: #f66f6a33
}

.devui-code-review__header .diff-type.rename {
    color: #71757f;
    background-color: #71757f33
}

.devui-code-review__header .file-info {
    display: flex;
    align-items: center;
    padding-left: 18px
}

.devui-code-review__header .file-info>span {
    display: inline-block;
    height: 20px;
    line-height: 20px
}

.devui-code-review__header .file-info>svg {
    margin-right: 8px
}

.devui-code-review__header .file-info .invert {
    transform: scale(-1)
}

.devui-code-review__header .file-info .file-name {
    max-width: 100%;
    font-size: var(--devui-font-size-sm, 12px);
    color: var(--devui-text, #252b3a);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.devui-code-review__header .file-info .diff-lines {
    font-size: var(--devui-font-size-sm, 12px);
    font-weight: 700
}

.devui-code-review__header .file-info .diff-lines.add-lines {
    padding-left: 8px;
    color: var(--devui-success, #50d4ab)
}

.devui-code-review__header .file-info .diff-lines.delete-lines {
    padding-left: 4px;
    color: var(--devui-danger, #f66f6a);
    margin-right: 8px
}

.devui-code-review__content {
    line-height: 20px
}

.devui-code-review__content table.d2h-diff-table {
    table-layout: fixed;
    font-size: 12px;
    margin: 0
}

.devui-code-review__content tr {
    border: none
}

.devui-code-review__content tr:hover .d2h-info {
    background-color: #bfcbf3
}

.devui-code-review__content th,.devui-code-review__content td {
    border: none;
    padding: 0
}

.devui-code-review__content td:first-child {
    position: static;
    display: table-cell
}

.devui-code-review__content td.expand-icon-wrapper {
    text-align: center
}

.devui-code-review__content td.comment-icon-hover {
    background-color: #bfcbf3!important
}

.devui-code-review__content td .expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    cursor: pointer
}

.devui-code-review__content td .expand-icon:hover {
    background-color: var(--devui-primary, #5e7ce0)
}

.devui-code-review__content td .expand-icon:hover svg g g g g {
    fill: var(--devui-light-text, #ffffff)
}

.devui-code-review__content td .expand-icon:hover svg g g polygon,.devui-code-review__content td .expand-icon:hover svg g g path {
    fill: var(--devui-light-text, #ffffff)
}

.devui-code-review__content .expand-line {
    height: 24px;
    line-height: 24px
}

.devui-code-review__content .d2h-file-wrapper {
    border: none
}

.devui-code-review__content .d2h-code-linenumber:after,.devui-code-review__content .d2h-code-side-linenumber:after {
    content: ""
}

.devui-code-review__content .d2h-code-linenumber {
    border-right: 2px solid transparent
}

.devui-code-review__content .d2h-code-line-ctn {
    word-break: break-all;
    word-wrap: break-word!important;
    white-space: break-spaces!important;
    display: inline-block!important;
    line-break: anywhere
}

.devui-code-review__content .d2h-code-line,.devui-code-review__content .d2h-code-side-line {
    width: 100%;
    padding-left: 0;
    padding-right: 16px
}

.devui-code-review__content.side-by-side tr td:nth-of-type(3) {
    border-left: 1px solid #eeeeee
}

.devui-code-review__content.side-by-side tr.comment-block td:last-child {
    border-left: 1px solid #eeeeee
}

.devui-code-review__content.side-by-side tr.comment-block .comment-cell {
    vertical-align: top
}

.devui-code-review__content.side-by-side .d2h-file-side-diff {
    width: 100%;
    overflow: hidden
}

.devui-code-review__content.side-by-side .d2h-code-side-linenumber {
    position: static;
    display: table-cell
}

.devui-code-review__content.side-by-side .d-code-left:nth-of-type(2)>.d2h-code-side-line,.devui-code-review__content.side-by-side .d-code-right:nth-of-type(4)>.d2h-code-side-line {
    border-left: 2px solid transparent
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-cntx {
    background-color: #fff8c5
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-del {
    background-color: #ffe5b4
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-del.d2h-code-linenumber {
    background-color: #ffc89d
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-ins {
    background-color: #d1f1a8
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-ins.d2h-code-linenumber {
    background-color: #daf4ae
}

.devui-code-review__content .comment-checked.d2h-cntx {
    background-color: #fff8c5
}

.devui-code-review__content .comment-checked.d2h-del {
    background-color: #ffe5b4
}

.devui-code-review__content .comment-checked.d2h-del.d2h-code-side-linenumber {
    background-color: #ffc89d
}

.devui-code-review__content .comment-checked.d2h-ins {
    background-color: #d1f1a8
}

.devui-code-review__content .comment-checked.d2h-ins.d2h-code-side-linenumber {
    background-color: #daf4ae
}

.devui-code-review__content .comment-checked.d2h-code-linenumber {
    border-right: 2px solid #fe7300
}

.devui-code-review__content .comment-checked.d-code-left:nth-of-type(2)>.d2h-code-side-line,.devui-code-review__content .comment-checked.d-code-right:nth-of-type(4)>.d2h-code-side-line {
    border-left: 2px solid #fe7300
}

.devui-code-review .comment-icon {
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--devui-base-bg, #ffffff);
    transform: translate(-50%);
    box-shadow: 0 0 1px 1px #252b3a29;
    cursor: pointer
}

.devui-code-review--left-selected .d-code-right span,.devui-code-review--right-selected .d-code-left span {
    -webkit-user-select: none;
    user-select: none
}

.devui-collapse {
    font-size: var(--devui-font-size, 12px);
    background: var(--devui-base-bg, #ffffff);
    width: 100%;
    overflow-y: auto;
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-collapse__item .devui-collapse--overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.devui-collapse__item-title {
    display: block;
    height: 45px;
    width: 100%;
    padding: 0 28px 0 20px;
    font-weight: 400;
    line-height: 45px;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-base-bg, #ffffff);
    box-sizing: border-box;
    cursor: pointer
}

.devui-collapse__item-title.devui-collapse__item--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-collapse__item-title.devui-collapse__item--disabled>.devui-collapse__open-icon svg path {
    fill: currentColor!important
}

.devui-collapse__item-title:not(.devui-collapse__item--disabled):hover {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-collapse__item>.devui-collapse__item-title {
    position: relative
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon {
    display: inline-block;
    text-indent: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 14px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transition: transform ease-out .4s
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon svg {
    width: 16px;
    height: 16px
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon svg path {
    fill: var(--devui-text-weak, #575d6c)
}

.devui-collapse__item>.devui-collapse__item-title.devui-collapse--open>.devui-collapse__open-icon {
    transform: rotate(180deg);
    transform-origin: center
}

.devui-collapse__item-content {
    padding: 0 12px 0 20px;
    line-height: 1.5;
    color: var(--devui-text-weak, #575d6c)
}

.devui-collapse-transition-leave-active {
    transition: all .4s ease-in-out;
    animation: panelUpOut .4s ease-in-out;
    animation-fill-mode: both
}

.devui-collapse-transition-enter-active {
    transition: all .4s ease-in-out;
    animation: panelUpIn .4s ease-in-out;
    animation-fill-mode: both
}

:host {
    display: block
}

.devui-tabs__nav--tabs,.devui-tabs__nav--pills {
    font-size: var(--devui-font-size, 12px);
    background: transparent;
    list-style: none
}

.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li {
    cursor: pointer;
    border: 2px solid transparent
}

.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a {
    cursor: pointer;
    border: none;
    line-height: 30px;
    background-color: transparent;
    padding: 0;
    text-decoration: none;
    color: var(--devui-aide-text, #71757f)
}

.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active {
    outline: none
}

.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a {
    color: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after {
    content: "";
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after {
    width: 100%;
    background: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--tabs .devui-tabs__new-tab,.devui-tabs__nav--pills .devui-tabs__new-tab {
    padding: 2px 0 0
}

.devui-tabs__nav--options {
    background: var(--devui-base-bg, #ffffff);
    border: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-radius: var(--devui-border-radius, 2px);
    padding: 2px;
    width: fit-content
}

.devui-tabs__nav--options>li {
    cursor: pointer;
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px);
    transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--options>li span>a {
    border: none;
    color: var(--devui-aide-text, #71757f);
    line-height: 26px;
    padding: 0 16px
}

.devui-tabs__nav--options>li span>a:hover,.devui-tabs__nav--options>li span>a:focus,.devui-tabs__nav--options>li span>a:active {
    outline: none
}

.devui-tabs__nav--options>li.active {
    background: var(--devui-global-bg, #f6f6f8)
}

.devui-tabs__nav--options>li.active span>a {
    color: var(--devui-brand, #5e7ce0);
    padding: 0 16px
}

.devui-tabs__nav--options>li.disabled {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--options>li.disabled a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-tabs__nav--options>li.active span>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled) span>a:hover {
    color: var(--devui-brand, #5e7ce0);
    background: transparent
}

.devui-tabs__nav--options .devui-tabs__close-btn {
    margin-right: 12px
}

.devui-tabs__nav--options .devui-tabs__new-tab {
    padding: 2px 16px 0
}

.devui-tabs__nav--slider {
    font-size: var(--devui-font-size, 12px);
    border: none;
    border-radius: var(--devui-border-radius, 2px);
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative
}

.devui-tabs__nav--slider>li {
    cursor: pointer;
    margin: 2px;
    position: relative;
    z-index: 1
}

.devui-tabs__nav--slider>li:first-child {
    border-left-width: 1px;
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-tabs__nav--slider>li:last-child {
    border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0
}

.devui-tabs__nav--slider>li a {
    cursor: pointer;
    border: none;
    color: var(--devui-aide-text, #71757f);
    line-height: 28px;
    padding: 0 16px
}

.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active {
    outline: none
}

.devui-tabs__nav--slider>li.disabled {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--slider>li.disabled a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a {
    color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover {
    color: var(--devui-brand-active, #526ecc);
    background: transparent
}

.devui-tabs__nav--slider>li.active {
    text-shadow: 0 0 .7px var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled) {
    color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--slider .devui-tabs__close-btn {
    margin-right: 12px
}

.devui-tabs__nav--slider .devui-tabs__new-tab {
    padding: 2px 16px 0
}

.devui-tabs__nav--wrapped {
    font-size: var(--devui-font-size, 12px);
    background: transparent;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-tabs__nav--wrapped>li {
    cursor: pointer;
    position: relative;
    padding: 8px 16px
}

.devui-tabs__nav--wrapped>li a {
    cursor: pointer;
    border: none;
    color: var(--devui-aide-text, #71757f);
    border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0
}

.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active {
    outline: none
}

.devui-tabs__nav--wrapped>li.disabled {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--wrapped>li.disabled a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-tabs__nav--wrapped>li.active {
    border: 1px solid var(--devui-dividing-line, #f2f2f3);
    background: var(--devui-global-bg, #f6f6f8);
    border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;
    margin: -1px;
    border-bottom-color: transparent
}

.devui-tabs__nav--wrapped>li.active a {
    color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a {
    color: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--tabs {
    border-bottom: 1px var(--devui-line, #d7d8da) solid
}

.devui-tabs__nav--tabs li {
    margin-left: 32px;
    margin-bottom: -3px
}

.devui-tabs__nav--tabs li:first-child {
    margin-left: 0
}

.devui-tabs__nav--pills>li {
    margin-left: 32px
}

.devui-tabs__nav--pills>li:first-child {
    margin-left: 0
}

.devui-tabs__nav {
    display: flex;
    align-items: center;
    list-style: none;
    padding-left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-user-select: none;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.devui-tabs__nav::-webkit-scrollbar {
    display: none
}

.devui-tabs__nav li a {
    text-decoration: none
}

.devui-tabs__nav li a.custom-width {
    display: inline-block;
    padding: 0;
    text-align: center
}

.devui-tabs__nav--right,.devui-tabs__nav--left {
    margin: 0
}

.devui-tabs__nav--right .devui-tabs__nav-slider-animation,.devui-tabs__nav--left .devui-tabs__nav-slider-animation {
    transition: top var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--right .devui-tabs__new-tab,.devui-tabs__nav--left .devui-tabs__new-tab {
    text-align: center
}

.devui-tabs__nav--right {
    display: block;
    float: right;
    border-bottom: none;
    margin-left: 10px
}

.devui-tabs__nav--right>li {
    margin-left: 0;
    padding: 0 16px;
    position: relative
}

.devui-tabs__nav--right>li:after {
    display: none
}

.devui-tabs__nav--right>li:before {
    content: " ";
    position: absolute;
    top: 0;
    left: -5px;
    margin: auto;
    height: 0;
    width: 2px;
    background: transparent;
    transition: height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--right>li.active:before {
    height: 100%;
    background: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--left {
    display: block;
    float: left;
    border-bottom: none;
    margin-right: 10px
}

.devui-tabs__nav--left>li {
    margin-left: 0;
    padding: 0 16px;
    position: relative
}

.devui-tabs__nav--left>li:after {
    content: " ";
    position: absolute;
    top: 0;
    right: -5px;
    margin: auto;
    height: 0;
    width: 2px;
    background: transparent;
    transition: height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--left>li.active:after {
    height: 100%;
    width: 2px;
    background: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav-content {
    display: flex;
    align-items: center
}

.devui-tabs__nav--options {
    padding-left: 2px
}

.devui-tabs__nav-slider-animation {
    position: absolute;
    z-index: 0;
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px);
    box-shadow: 0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12));
    top: 1px;
    height: 30px;
    transition: left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__new-tab .devui-icon__container:hover,.devui-tabs__close-btn .devui-icon__container:hover {
    color: var(--devui-text, #252b3a)
}

.devui-tabs__new-tab .devui-icon__container>i,.devui-tabs__close-btn .devui-icon__container>i {
    transition: none
}

.devui-tabs__new-tab .devui-icon__container {
    color: var(--devui-aide-text, #71757f)
}

.devui-tabs__close-btn {
    margin-left: 12px
}

.devui-tabs__close-btn .devui-icon__container {
    color: var(--devui-form-control-line, #d7d8da)
}

.devui-tabs--right .devui-tabs__nav--options,.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--options,.devui-tabs--left .devui-tabs__nav--wrapped {
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--right .devui-tabs__nav--options>li:after,.devui-tabs--right .devui-tabs__nav--wrapped>li:after,.devui-tabs--left .devui-tabs__nav--options>li:after,.devui-tabs--left .devui-tabs__nav--wrapped>li:after {
    display: none
}

.devui-tabs--right .devui-tabs__nav--options>li:before,.devui-tabs--right .devui-tabs__nav--wrapped>li:before,.devui-tabs--left .devui-tabs__nav--options>li:before,.devui-tabs--left .devui-tabs__nav--wrapped>li:before {
    display: none
}

.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--wrapped {
    border-bottom: none
}

.devui-tabs--right .devui-tabs__nav--wrapped>li,.devui-tabs--left .devui-tabs__nav--wrapped>li {
    padding: 8px 16px
}

.devui-tabs--right .devui-tabs__nav--slider>li:after,.devui-tabs--left .devui-tabs__nav--slider>li:after {
    display: none
}

.devui-tabs--right .devui-tabs__nav--slider>li:before,.devui-tabs--left .devui-tabs__nav--slider>li:before {
    display: none
}

.devui-tabs--right .devui-tabs__nav--slider .devui-tabs__nav-slider-animation,.devui-tabs--left .devui-tabs__nav--slider .devui-tabs__nav-slider-animation {
    left: 1px
}

.devui-tabs--right .devui-tabs__nav--wrapped {
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--right .devui-tabs__nav--wrapped>li a {
    border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0
}

.devui-tabs--right .devui-tabs__nav--wrapped>li.active {
    border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;
    border-bottom-color: var(--devui-dividing-line, #f2f2f3);
    border-left-color: transparent
}

.devui-tabs--right .devui-tabs__nav--tabs {
    border-left: 1px solid var(--devui-line, #d7d8da)
}

.devui-tabs--left .devui-tabs__nav--wrapped {
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--left .devui-tabs__nav--wrapped>li a {
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-tabs--left .devui-tabs__nav--wrapped>li.active {
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);
    border-bottom-color: var(--devui-dividing-line, #f2f2f3);
    border-right-color: transparent
}

.devui-tabs--left .devui-tabs__nav--tabs {
    border-right: 1px solid var(--devui-line, #d7d8da)
}

.devui-tab__content {
    margin-top: 10px;
    overflow: hidden;
    padding: 10px 0
}

.devui-color-picker-palette {
    position: relative;
    width: 100%
}

.devui-color-picker-palette__white,.devui-color-picker-palette__black {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.devui-color-picker-palette__black {
    background: linear-gradient(0deg,#000000,transparent)
}

.devui-color-picker-palette__white {
    background: linear-gradient(90deg,#fff,#fff0)
}

.devui-color-picker-palette-handler {
    position: absolute
}

.devui-color-picker-palette-handler div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px #0000005e;
    cursor: pointer
}

.devui-color-picker-hue-slider {
    position: relative;
    margin: 13px 0;
    width: 100%;
    height: 14px;
    box-shadow: 2px 0 8px #00000014;
    border-radius: 15px
}

.devui-color-picker-hue-slider.transparent {
    background-image: url();
    background-repeat: repeat
}

.devui-color-picker-hue-slider__bar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: -webkit-linear-gradient(left,rgb(255,0,0) 0%,rgb(255,255,0) 16.66%,rgb(0,255,0) 33.33%,rgb(0,255,255) 50%,rgb(0,0,255) 66.66%,rgb(255,0,255) 83.33%,rgb(255,0,0) 100%);
    background: -moz-linear-gradient(left,rgb(255,0,0) 0%,rgb(255,255,0) 16.66%,rgb(0,255,0) 33.33%,rgb(0,255,255) 50%,rgb(0,0,255) 66.66%,rgb(255,0,255) 83.33%,rgb(255,0,0) 100%);
    background: -ms-linear-gradient(left,rgb(255,0,0) 0%,rgb(255,255,0) 16.66%,rgb(0,255,0) 33.33%,rgb(0,255,255) 50%,rgb(0,0,255) 66.66%,rgb(255,0,255) 83.33%,rgb(255,0,0) 100%)
}

.devui-color-picker-hue-slider__bar-pointer {
    position: absolute;
    width: 14px;
    height: 14px
}

.devui-color-picker-hue-slider__bar-handle {
    width: 14px;
    height: 14px;
    border-radius: 6px;
    transform: translate(-7px,-2px);
    background-color: #f8f8f8;
    margin-top: 2px;
    box-shadow: 0 1px 4px #0000005e;
    cursor: pointer
}

.devui-color-picker-hue-slider__bar-handle.vertical {
    transform: translateY(-7px);
    margin-top: 0
}

.devui-color-picker-alpha-slider {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    height: 14px;
    box-shadow: 2px 0 8px #00000014;
    border-radius: 15px
}

.devui-color-picker-alpha-slider.transparent {
    background-image: url();
    background-repeat: repeat
}

.devui-color-picker-alpha-slider__bar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 15px
}

.devui-color-picker-alpha-slider__bar-pointer {
    position: absolute;
    width: 14px;
    height: 14px
}

.devui-color-picker-alpha-slider__bar-handle {
    width: 14px;
    height: 14px;
    border-radius: 6px;
    transform: translate(-7px,-2px);
    background-color: #f8f8f8;
    margin-top: 2px;
    box-shadow: 0 1px 4px #0000005e;
    cursor: pointer
}

.devui-color-picker-alpha-slider__bar-handle.vertical {
    transform: translateY(-7px);
    margin-top: 0
}

.devui-color-picker-edit {
    justify-content: space-between;
    align-items: center
}

.devui-color-picker-edit-text {
    display: inline-block;
    width: 50px;
    padding: 0 10px;
    -webkit-user-select: none;
    user-select: none
}

.devui-color-picker-edit-name {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50px
}

.devui-color-picker-edit-flex {
    display: flex;
    align-items: center
}

.devui-color-picker-edit-input {
    flex: 1;
    padding: 0 5px
}

.devui-color-picker-edit-input input {
    border: none;
    outline: none;
    width: 100%;
    text-align: center
}

.devui-color-picker-edit-input-wrapper {
    width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    padding: 2px
}

.devui-color-picker-edit-input-wrapper:focus-within {
    border: 1px solid var(--devui-primary)
}

.devui-color-picker-edit-input.string-input .devui-color-picker-edit-input-wrapper {
    border-radius: 5px
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper {
    border-radius: 0
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.devui-color-picker-basic {
    flex-wrap: wrap;
    align-items: center
}

.devui-color-picker-basic-div {
    box-sizing: content-box;
    margin: 4px;
    width: 20px;
    height: 20px;
    border: solid 1px #e7e7e7;
    cursor: pointer;
    border-radius: 1px
}

.devui-color-picker-panel {
    width: 270px;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 3px 5px -1px #0000001a,0 5px 8px #0000001a,0 1px 14px #0000001a
}

.devui-color-picker-history {
    margin-top: 10px
}

.devui-color-picker-history_color-box {
    cursor: pointer;
    margin: 5px;
    height: 20px;
    width: 20px;
    border: solid 1px #e7e7e7
}

.devui-color-picker-history_color-box.transparent {
    background: linear-gradient(to bottom right,#0000,#0000 calc(50% - 1.5px),#f18887 50%,#0000 calc(50% + 1.5px),#0000)
}

.devui-color-picker {
    position: relative
}

.devui-color-picker-position {
    position: absolute;
    z-index: var(--devui-z-index-function-widget, 999);
    background-color: var(--devui-connected-overlay-bg, #ffffff)
}

.devui-color-picker-color-value {
    display: flex;
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-weight: 700;
    color: #cc0f0f
}

.devui-color-picker-container {
    padding: 3px;
    border: 1px solid rgb(224,224,230);
    border-radius: 3px
}

.devui-color-picker-container-wrap {
    width: 100%;
    height: 26px;
    box-sizing: content-box;
    box-shadow: 3px 0 5px #00000014;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle
}

.devui-color-picker-container-wrap-current-color {
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%
}

.devui-color-picker-container-wrap-current-color-transparent {
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    padding: 3px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2
}

.devui-color-picker-container-wrap-transparent {
    background-image: url();
    background-repeat: repeat
}

.color-picker-transition-enter-from,.color-picker-transition-leave-to {
    opacity: 0
}

.color-picker-transition-enter-to,.color-picker-transition-leave-from {
    opacity: 1
}

.color-picker-transition-enter-active,.color-picker-transition-leave-active {
    transition: opacity .2s ease-in-out
}

.devui-comment {
    display: flex;
    align-items: flex-start
}

.devui-comment__avatar {
    margin: 0 16px 0 0
}

.devui-comment__main {
    width: 100%
}

.devui-comment__head {
    display: flex;
    align-items: center
}

.devui-comment__author {
    padding: 0 8px 0 0;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text-weak, #575d6c);
    font-weight: 800
}

.devui-comment__datetime {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f)
}

.devui-comment__content {
    margin-top: 8px;
    line-height: 20px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text, #252b3a)
}

.devui-comment__actions {
    padding: 0;
    list-style-type: none;
    margin: 12px 0 0
}

.devui-countdown .countdown-content {
    font-size: 24px;
    color: var(--devui-text, #252b3a)
}

.devui-countdown .countdown-content span {
    display: inline-block
}

.devui-countdown .countdown-content .countdown-prefix {
    margin-right: 4px
}

.devui-countdown .countdown-content .countdown-suffix {
    margin-left: 4px
}

.devui-data-grid,.devui-data-grid * {
    box-sizing: border-box
}

.devui-data-grid::-webkit-scrollbar,.devui-data-grid *::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.devui-data-grid::-webkit-scrollbar-track,.devui-data-grid *::-webkit-scrollbar-track {
    background-color: transparent
}

.devui-data-grid::-webkit-scrollbar-thumb,.devui-data-grid *::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: transparent
}

.devui-data-grid::-webkit-scrollbar-thumb:hover,.devui-data-grid *::-webkit-scrollbar-thumb:hover {
    background-color: var(--devui-placeholder, #babbc0)
}

.devui-data-grid::-webkit-scrollbar-corner,.devui-data-grid *::-webkit-scrollbar-corner {
    background-color: transparent
}

.devui-data-grid {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: inherit
}

.devui-data-grid__x-space,.devui-data-grid__y-space {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

.devui-data-grid__empty {
    position: absolute;
    top: 47px;
    z-index: 5;
    width: 100%
}

.devui-data-grid__head-wrapper {
    position: relative;
    flex: none;
    overflow-x: hidden
}

.devui-data-grid__head-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent
}

.devui-data-grid__head {
    display: flex;
    background-color: var(--devui-base-bg, #ffffff);
    width: fit-content
}

.devui-data-grid__th {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: var(--devui-font-size-sm, 12px);
    font-weight: 700;
    padding: 0 16px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    color: var(--devui-text, #252b3a)
}

.devui-data-grid__th .th-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-data-grid__th svg.th-sort-icon {
    margin-left: 8px;
    visibility: hidden;
    cursor: pointer
}

.devui-data-grid__th svg.th-sort-icon g use {
    fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-data-grid__th svg.th-sort-icon g polygon {
    fill: var(--devui-icon-bg, #ffffff)
}

.devui-data-grid__th svg.th-sort-icon:hover g use {
    fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-data-grid__th svg.th-sort-icon.asc {
    visibility: visible
}

.devui-data-grid__th svg.th-sort-icon.asc g use {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__th svg.th-sort-icon.asc g polygon:last-of-type {
    opacity: .3
}

.devui-data-grid__th svg.th-sort-icon.desc {
    visibility: visible
}

.devui-data-grid__th svg.th-sort-icon.desc g use {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__th svg.th-sort-icon.desc g polygon:last-of-type {
    opacity: .3
}

.devui-data-grid__th svg.th-sort-icon.th-sort-default-visible {
    visibility: visible
}

.devui-data-grid__th svg.th-filter-icon {
    display: block;
    height: 16px;
    margin-left: 8px;
    text-align: right;
    visibility: hidden;
    cursor: pointer
}

.devui-data-grid__th svg.th-filter-icon g {
    fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-data-grid__th svg.th-filter-icon:hover g {
    fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-data-grid__th svg.th-filter-icon.th-filter-default-visible {
    visibility: visible
}

.devui-data-grid__th:hover {
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-data-grid__th:hover .resize-handle {
    border-right: 2px solid var(--devui-line, #d7d8da)
}

.devui-data-grid__th:hover .resize-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    transform: translateY(-50%);
    pointer-events: none;
    left: -8px;
    border-right-color: var(--devui-line, #d7d8da)
}

.devui-data-grid__th:hover .resize-handle:after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    transform: translateY(-50%);
    pointer-events: none;
    left: 6px;
    border-left-color: var(--devui-line, #d7d8da)
}

.devui-data-grid__th:hover .th-sort-icon,.devui-data-grid__th:hover .th-filter-icon {
    visibility: visible
}

.devui-data-grid__th:last-child:hover .resize-handle:after {
    display: none
}

.devui-data-grid__th .resize-handle {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize
}

.devui-data-grid__th .resize-handle:hover {
    border-right: 2px solid var(--devui-form-control-line-active, #5e7ce0)
}

.devui-data-grid__th .resize-handle:hover:before,.devui-data-grid__th .resize-handle:hover:after {
    display: none
}

.devui-data-grid__th--mini {
    height: 24px;
    line-height: 24px
}

.devui-data-grid__th--xs {
    height: 32px;
    line-height: 32px
}

.devui-data-grid__th--sm,.devui-data-grid__th--md,.devui-data-grid__th--lg {
    height: 42px;
    line-height: 42px
}

.devui-data-grid__th--operable:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-data-grid__th--sort-active,.devui-data-grid__th--filter-active {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-data-grid__th--filter-active svg.th-filter-icon {
    visibility: visible
}

.devui-data-grid__th--filter-active svg.th-filter-icon g {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__th--filter-active svg.th-filter-icon:hover g {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__body-wrapper {
    position: relative;
    width: 100%;
    flex: 1
}

.devui-data-grid__body-wrapper .devui-data-grid__empty {
    top: 0
}

.devui-data-grid__body {
    width: fit-content
}

.devui-data-grid__tr {
    display: flex;
    width: fit-content;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-data-grid__td {
    flex-shrink: 0;
    flex-grow: 0;
    font-size: var(--devui-font-size, 12px);
    padding: 0 16px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-data-grid__td .tree-indent-placeholder {
    display: inline-block
}

.devui-data-grid__td svg.toggle-tree-icon {
    padding-right: 8px;
    margin-top: -2px;
    vertical-align: middle;
    box-sizing: content-box;
    cursor: pointer
}

.devui-data-grid__td svg.expand-icon rect {
    stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.expand-icon rect:last-child {
    stroke: none;
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.expand-icon:hover rect {
    stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td svg.expand-icon:hover rect:last-child {
    stroke: none;
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td svg.fold-icon rect {
    stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.fold-icon path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.fold-icon:hover rect {
    stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td svg.fold-icon:hover path {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td--checkable {
    display: flex;
    align-items: center
}

.devui-data-grid__td--mini {
    height: 24px;
    line-height: 24px
}

.devui-data-grid__td--xs {
    height: 30px;
    line-height: 30px
}

.devui-data-grid__td--sm {
    height: 42px;
    line-height: 42px
}

.devui-data-grid__td--md {
    height: 46px;
    line-height: 46px
}

.devui-data-grid__td--lg {
    height: 54px;
    line-height: 54px
}

.devui-data-grid__last-sticky-left-cell {
    border-right-color: transparent!important
}

.devui-data-grid__first-sticky-right-cell {
    border-left-color: transparent!important
}

.devui-data-grid__sticky-left-head,.devui-data-grid__sticky-right-head,.devui-data-grid__sticky-left-body,.devui-data-grid__sticky-right-body {
    position: absolute;
    z-index: 10
}

.devui-data-grid--scroll-middle .devui-data-grid__last-sticky-left-cell,.devui-data-grid--scroll-right .devui-data-grid__last-sticky-left-cell {
    position: relative;
    border-right-color: transparent!important;
    background-color: linear-gradient(to left,transparent,var(--devui-base-bg, #ffffff) 10px)
}

.devui-data-grid--scroll-middle .devui-data-grid__last-sticky-left-cell:after,.devui-data-grid--scroll-right .devui-data-grid__last-sticky-left-cell:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    box-shadow: inset var(--devui-table-inset-shadow-left, 8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-data-grid--scroll-middle .devui-data-grid__first-sticky-right-cell,.devui-data-grid--scroll-left .devui-data-grid__first-sticky-right-cell {
    position: relative;
    border-left-color: transparent!important;
    background-color: linear-gradient(to right,transparent,var(--devui-base-bg, #ffffff) 10px)
}

.devui-data-grid--scroll-middle .devui-data-grid__first-sticky-right-cell:after,.devui-data-grid--scroll-left .devui-data-grid__first-sticky-right-cell:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    box-shadow: inset var(--devui-table-inset-shadow-right, -8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-data-grid__tooltip.devui-flexible-overlay {
    max-width: 200px;
    min-height: 26px;
    padding: 0 16px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-feedback-overlay-text, #dfe1e6);
    letter-spacing: 0;
    line-height: 1.5;
    background: var(--devui-feedback-overlay-bg, #464d6e);
    box-shadow: none;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    text-align: start;
    border-radius: var(--devui-border-radius-feedback, 4px);
    line-break: auto;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    word-spacing: normal;
    white-space: normal;
    opacity: 1;
    z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-data-grid__tooltip.devui-flexible-overlay span {
    display: block;
    max-width: 100%;
    max-height: inherit;
    padding: 4px 0;
    overflow: auto
}

.devui-data-grid__filter-wrapper {
    font-size: var(--devui-font-size, 12px)
}

.devui-data-grid__filter-wrapper * {
    box-sizing: border-box
}

.devui-data-grid__filter-wrapper .filter-all-check {
    width: 200px;
    padding: 0 8px 4px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid__filter-wrapper .filter-multiple-menu {
    width: 200px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid__filter-wrapper .filter-single-menu {
    width: 200px
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item {
    padding: 0 8px;
    color: var(--devui-text, #252b3a);
    border-radius: var(--devui-border-radius, 2px);
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item-active {
    color: var(--devui-list-item-active-bg, #f2f5fc);
    background-color: var(--devui-list-item-active-text, #252b3a)
}

.devui-data-grid__filter-wrapper .filter-operation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    height: 26px
}

.devui-data-grid__filter-wrapper .filter-item {
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-data-grid--fix-header {
    display: flex;
    flex-flow: column nowrap;
    overflow: unset
}

.devui-data-grid--striped .devui-data-grid__tr:nth-of-type(2n) {
    background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr .devui-data-grid__last-sticky-left-cell {
    background-color: linear-gradient(to left,transparent,var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr .devui-data-grid__first-sticky-right-cell {
    background-color: linear-gradient(to right,transparent,var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-data-grid--header-bg .devui-data-grid__head {
    background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-data-grid--bordered .devui-data-grid__th {
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__th:first-child {
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__td {
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__td:first-child {
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--borderless .devui-data-grid__th,.devui-data-grid--borderless .devui-data-grid__td {
    border: none
}

.devui-data-grid--shadowed {
    border-radius: var(--devui-border-radius-card, 8px);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-data-grid--left {
    text-align: left
}

.devui-data-grid--left.devui-data-grid__th,.devui-data-grid--left.devui-data-grid__td {
    justify-content: flex-start
}

.devui-data-grid--center {
    text-align: center
}

.devui-data-grid--center.devui-data-grid__th,.devui-data-grid--center.devui-data-grid__td {
    justify-content: center
}

.devui-data-grid--right {
    text-align: right
}

.devui-data-grid--right.devui-data-grid__th,.devui-data-grid--right.devui-data-grid__td {
    justify-content: flex-end
}

.devui-data-grid--is-virtual {
    max-height: unset
}

.devui-data-grid .resize-bar {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 9999;
    width: 2px;
    background: var(--devui-form-control-line-active, #5e7ce0);
    cursor: col-resize
}

.data-grid-selector {
    -webkit-user-select: none;
    user-select: none;
    cursor: col-resize
}

.devui-calendar-toolbar {
    height: 32px;
    font-weight: var(--devui-font-title-weight, bold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-user-select: none;
    user-select: none
}

.devui-calendar-toolbar a {
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: var(--devui-text, #252b3a);
    display: block;
    text-align: center;
    flex-shrink: 1;
    flex-grow: 0;
    cursor: pointer;
    text-decoration: none
}

.devui-calendar-toolbar a:hover {
    color: var(--devui-text, #252b3a);
    text-decoration: none
}

.devui-calendar-toolbar a.disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-calendar-toolbar a.disabled:hover {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-calendar-toolbar a.title {
    flex-grow: 1;
    flex-shrink: 1
}

.devui-vertical-slider {
    display: flex;
    flex-direction: column;
    min-width: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex-grow: 1
}

.devui-vertical-slider .movable-bar {
    position: relative;
    overflow: visible
}

.devui-vertical-slider .movable-bar .slider-item {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box
}

.devui-vertical-slider .forcus {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 50%;
    top: 25%
}

.devui-vertical-slider .slider-mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #0000;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.3),transparent,rgba(0,0,0,.3));
    z-index: 99
}

.devui-calendar-panel {
    width: 230px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden
}

.devui-calendar-panel .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 24px
}

.devui-calendar-panel .row .cell {
    width: 100%;
    text-align: center;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: var(--devui-border-radius, 2px);
    background-color: #fff;
    color: #000
}

.devui-calendar-panel .row .cell:hover {
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-calendar-panel .row .cell.selected {
    background-color: #06c;
    color: #f1f1f1
}

.devui-calendar-panel .row .cell.selected:hover {
    background-color: #08d;
    color: #fff
}

.devui-calendar-panel .row .cell.innerday {
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-calendar-panel .row .cell.disabled,.devui-calendar-panel .row .cell.not-current {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-calendar-panel .row .cell.disabled {
    cursor: not-allowed
}

.devui-calendar-panel .head {
    cursor: default;
    padding: 0;
    margin: 0
}

.devui-calendar-panel .body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    list-style: none
}

.devui-calendar-panel .today-container {
    padding: 8px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.devui-calendar-panel .today-container.disabled .today-button {
    border: 1px solid #cccccc;
    cursor: not-allowed
}

.devui-calendar-panel .today-container .today-button {
    border: 1px solid #0066cc;
    border-radius: 3px;
    padding: 2px 20px;
    font-size: 12px
}

.devui-calendar-timepicker {
    width: 100px;
    height: 210px;
    overflow: hidden;
    position: relative
}

.devui-calendar-timepicker .head {
    height: 32px;
    line-height: 32px;
    background-color: #f1f1f1;
    text-align: center;
    display: flex;
    justify-content: center
}

.devui-calendar-timepicker .select {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 178px
}

.devui-calendar-timepicker .select .column {
    cursor: default;
    overflow: auto;
    flex-grow: 1
}

.devui-calendar-timepicker .select .column span {
    display: block;
    font-size: 11px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    overflow: hidden;
    border-radius: 100%;
    background-color: #f6f6f6
}

.devui-calendar-timepicker .select .column span.selected {
    background-color: #0af;
    color: #fff
}

.devui-calendar-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    -webkit-user-select: none;
    user-select: none;
    position: relative
}

.devui-datepicker-container .input-container {
    border: 1px solid #0066cc;
    border-radius: var(--devui-border-radius, 2px);
    display: flex;
    flex-direction: row;
    width: 200px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative
}

.devui-datepicker-container .datepicker-input {
    position: relative;
    width: 100%
}

.devui-datepicker-container .datepicker-input input {
    border: 0 solid #000000;
    outline: none;
    margin-right: 20px
}

.devui-datepicker-container .datepicker-input-icon {
    position: absolute;
    z-index: 9;
    right: 6px
}

.devui-datepicker-container .devui-datepicker-panel {
    border: 1px solid #000000;
    margin: 0;
    padding: 0;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: var(--devui-border-radius-card, 8px);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    background-color: var(--devui-base-bg, #ffffff);
    font-size: 13px;
    position: absolute;
    z-index: 99
}

.devui-stick-slider {
    border: 1px solid #000000;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    position: relative;
    width: 36px;
    height: 36px
}

.devui-stick-slider .main-button {
    width: 36px;
    height: 36px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: red;
    border-radius: 100%;
    position: relative;
    z-index: 10
}

.devui-stick-slider .sub-buttons {
    border: 1px solid #0000ff;
    width: 240px;
    height: 240px;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.devui-stick-slider .sub-buttons .button {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #fa0;
    position: relative;
    margin: 5px;
    cursor: pointer
}

.devui-stick-slider .sub-buttons .button.selected {
    background-color: #f30
}

.devui-scroll-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.devui-scroll-box * {
    -webkit-user-select: none;
    user-select: none
}

.devui-scroll-box .box-content {
    position: static;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth
}

.devui-scroll-box .box-content-behavior-auto {
    scroll-behavior: auto
}

.devui-scroll-box .box-sroll {
    width: 8px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    background-color: #d46b6b00
}

.devui-scroll-box .box-sroll .scroll-child {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--devui-line, #d7d8da);
    border-radius: 8px
}

.devui-popup-line {
    width: 100%;
    height: 256px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    display: flex
}

.devui-popup-line .time-item {
    height: 100%;
    display: inline-block;
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3);
    overflow-y: auto
}

.devui-popup-line .time-item:last-child {
    border-right: none
}

.devui-popup-line .time-item .time-ul {
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0;
    margin: 0 auto;
    list-style: none
}

.devui-popup-line .time-item .time-ul .time-li {
    display: block;
    box-sizing: border-box;
    list-style: none;
    text-align: center;
    margin: 0 0 6px;
    height: 26px;
    overflow: hidden;
    line-height: 26px;
    font-size: 0;
    color: var(--devui-text, #252b3a)
}

.devui-popup-line .time-item .time-ul .time-li:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-popup-line .time-item .time-ul .time-li span {
    display: block;
    font-size: var(--devui-font-size-md, 12px)
}

.devui-popup-line .time-item .time-ul:last-child:after {
    content: "";
    display: block;
    height: 224px
}

.devui-popup-line .time-item .time-ul .active-li,.devui-popup-line .time-item .time-ul .active-li:hover {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-popup-line .time-item .time-ul .disabled-li {
    background-color: var(--devui-disabled-bg, #f5f5f5);
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-date-picker-pro {
    display: inline-block;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker {
    position: relative
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker-icon {
    display: inline-flex;
    align-items: center
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-input-slot__suffix {
    cursor: pointer
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    line-height: 12px;
    align-items: center
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon:hover svg path {
    fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-date-picker-pro--icon-visible {
    visibility: visible
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-date-picker-pro--icon-hidden {
    visibility: hidden
}

.devui-date-picker-pro__panel {
    width: max-content
}

.devui-date-picker-pro__panel-content {
    display: flex
}

.devui-date-picker-pro__panel-footer {
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
    padding: 8px
}

.devui-date-picker-pro__panel-footer-center {
    text-align: center
}

.devui-date-picker-pro__panel-right-area {
    padding: 8px 16px;
    display: inline-block;
    height: 305px;
    font-size: var(--devui-font-size-sm, 12px);
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-date-picker-pro__panel-right-area::-webkit-scrollbar {
    width: 0!important
}

.devui-date-picker-pro__calendar-panel {
    text-align: center;
    display: flex
}

.devui-date-picker-pro__calendar-panel--year-list {
    display: inline-block;
    width: 80px;
    height: 305px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.devui-date-picker-pro__calendar-panel--year-list::-webkit-scrollbar {
    width: 0!important
}

.devui-date-picker-pro__calendar-panel--year-list-item {
    background-color: var(--devui-global-bg, #f6f6f8)
}

.devui-date-picker-pro__calendar-panel--year-list-item .devui-date-picker-pro__year-title {
    font-size: var(--devui-font-size-md, 12px);
    font-weight: 700;
    line-height: 30px;
    cursor: pointer
}

.devui-date-picker-pro__calendar-panel--year-list-item .devui-date-picker-pro__month-title {
    font-size: var(--devui-font-size-sm, 12px);
    line-height: 30px;
    cursor: pointer
}

.devui-date-picker-pro__calendar-panel--year-list-item.devui-date-picker-pro__year-title-active {
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-date-picker-pro__calendar-panel--year-list-item:hover:not(.devui-date-picker-pro__year-title-active) {
    background-color: var(--devui-list-item-selected-bg, #f2f5fc)
}

.devui-date-picker-pro__calendar-panel--main {
    padding: 4px;
    display: inline-block;
    width: 253px;
    height: 305px;
    font-size: var(--devui-font-size-sm, 12px);
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.devui-date-picker-pro__calendar-panel--main::-webkit-scrollbar {
    width: 0!important
}

.devui-date-picker-pro__calendar-panel--main .devui-date-picker-pro__calendar-table tr,.devui-date-picker-pro__calendar-panel--main .devui-date-picker-pro__calendar-table td {
    border: none;
    padding: 0;
    text-align: center;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-date-picker-pro__tbody-wrapper {
    height: 270px;
    width: 100%;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.devui-date-picker-pro__tbody-wrapper::-webkit-scrollbar {
    width: 0!important
}

.devui-date-picker-pro__calendar-table {
    border-spacing: 0;
    margin: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-week-header td {
    width: 35px;
    height: 22px;
    padding: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-title {
    text-align: start;
    line-height: 26px;
    color: var(--devui-aide-text, #71757f);
    padding-left: 8px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content {
    color: var(--devui-text, #252b3a);
    border-spacing: 0 4px;
    border-collapse: separate;
    margin: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date {
    padding: 0 4px;
    width: 30px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date span {
    cursor: pointer;
    display: block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date:not(.devui-date-picker-pro__table-date-selected):not(.devui-date-picker-pro__table-date-disabled):hover span {
    background-color: var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-today span {
    color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-selected span,.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start span,.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end span {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-in-range {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-in-range span:hover {
    background-color: var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end) {
    position: relative
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end):after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 22px;
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    right: 0;
    top: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end):hover:after {
    display: none
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end) span:not(:hover) {
    border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start) {
    position: relative
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start):after {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 22px;
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    left: 0;
    top: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start):hover:after {
    display: none
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start) span:not(:hover) {
    border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-disabled span {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-date-picker-pro__panel-time {
    display: inline-block;
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
    height: 305px;
    text-align: center;
    width: 115px
}

.devui-date-picker-pro__panel-time--title {
    display: flex;
    height: 30px
}

.devui-date-picker-pro__panel-time--title-item {
    flex: 1 1 0%;
    line-height: 30px
}

.devui-date-picker-pro__panel-time .devui-time-list,.devui-date-picker-pro__panel-time .devui-time-list .time-item {
    border: none
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li {
    padding: 0 7px;
    line-height: 22px;
    height: 22px;
    margin-bottom: 8px
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li:hover {
    background-color: transparent
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li span {
    font-size: var(--devui-font-size-sm, 12px);
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li span:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li {
    background-color: transparent
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li span,.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li span:hover {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-range-date-picker-pro {
    display: inline-block;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-range-date-picker-pro.devui-range-date-picker-pro__range-width {
    width: 300px
}

.devui-range-date-picker-pro.devui-range-date-picker-pro__range-time-width {
    width: 400px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 24px;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error,.devui-range-date-picker-pro--disabled,.devui-range-date-picker-pro--glow-style):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__input {
    flex: 1 1
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input {
    display: inline-block;
    height: 26px;
    width: 100%
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input__wrapper {
    border: none
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input.devui-input--sm {
    height: 24px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input.devui-input--lg {
    height: 44px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__start .devui-input--feedback {
    padding-right: 0
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__active-input .devui-input__inner {
    color: var(--devui-brand, #5e7ce0)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__normal-input .devui-input__inner {
    color: var(--devui-text, #252b3a)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__separator {
    display: inline-block;
    padding: 0 4px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input-slot__suffix {
    cursor: pointer
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker-icon {
    display: inline-flex;
    align-items: center
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    line-height: 12px;
    align-items: center
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon:hover svg path {
    fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro--icon-visible {
    visibility: visible
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro--icon-hidden {
    visibility: hidden
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled:hover {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled .devui-input__inner {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--glow-style:hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-range-date-picker-pro--open .devui-range-date-picker-pro__range-picker {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-range-date-picker-pro--open .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(.devui-range-date-picker-pro--disabled):hover {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-range-date-picker-pro--open .devui-range-date-picker-pro--glow-style {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-date-picker-pro__year-calendar-panel {
    height: 200px;
    width: 204px;
    padding: 8px 12px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list {
    width: 184px;
    height: 186px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list::-webkit-scrollbar {
    width: 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-list-item {
    display: flex;
    padding: 4px 0;
    height: 48px
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title {
    width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title:hover:not(.devui-date-picker-pro__year-active):not(.devui-date-picker-pro__year-disabled) {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__this-year {
    color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-active {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-in-range:not(.devui-date-picker-pro__year-active) {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    border-radius: 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-in-range:not(.devui-date-picker-pro__year-active):hover {
    background-color: var(--devui-range-item-hover-bg, #e9edfa);
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-start:not(.devui-date-picker-pro__year-end):not(:hover) {
    border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-end:not(.devui-date-picker-pro__year-start):not(:hover) {
    border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed;
    border-radius: 0
}

.devui-date-picker-pro__month-calendar-panel {
    height: 300px;
    text-align: center;
    font-size: var(--devui-font-size-sm, 12px);
    display: flex
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list {
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    display: inline-block;
    width: 80px;
    -ms-overflow-style: none
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list::-webkit-scrollbar {
    width: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item {
    background-color: var(--devui-global-bg, #f6f6f8);
    font-size: var(--devui-font-size-md, 12px);
    height: 30px;
    line-height: 30px;
    cursor: pointer
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item.devui-date-picker-pro__year-item-active {
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item:hover:not(.devui-date-picker-pro__year-item-active) {
    background-color: var(--devui-list-item-selected-bg, #f2f5fc)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper {
    height: 300px;
    width: 208px;
    padding: 4px;
    display: inline-block
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list {
    height: 100%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list::-webkit-scrollbar {
    width: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list tr,.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list td {
    text-align: center;
    border: none;
    padding: 0;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-title {
    text-align: start;
    line-height: 26px;
    color: var(--devui-aide-text, #71757f);
    padding-left: 8px
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content {
    color: var(--devui-text, #252b3a);
    margin: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item {
    width: 60px;
    height: 40px;
    padding: 4px 0;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item span {
    cursor: pointer;
    display: block;
    height: 32px;
    line-height: 32px;
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item:hover:not(.devui-date-picker-pro__month-active):not(.devui-date-picker-pro__month-disabled) span {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__this-month span {
    color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-active span {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-in-range:not(.devui-date-picker-pro__month-active) span {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    border-radius: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-in-range:not(.devui-date-picker-pro__month-active):hover span {
    background-color: var(--devui-range-item-hover-bg, #e9edfa);
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-start:not(.devui-date-picker-pro__month-end):not(:hover) span {
    border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-end:not(.devui-date-picker-pro__month-start):not(:hover) span {
    border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-disabled {
    cursor: not-allowed
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-disabled span {
    color: var(--devui-disabled-text, #cfd0d3);
    border-radius: 0
}

.devui-range-date-picker-pro--fade-bottom-enter-from,.devui-range-date-picker-pro--fade-bottom-leave-to,.devui-date-picker-pro--fade-bottom-enter-from,.devui-date-picker-pro--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-range-date-picker-pro--fade-bottom-enter-to,.devui-range-date-picker-pro--fade-bottom-leave-from,.devui-date-picker-pro--fade-bottom-enter-to,.devui-date-picker-pro--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-range-date-picker-pro--fade-bottom-enter-active,.devui-date-picker-pro--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-range-date-picker-pro--fade-bottom-leave-active,.devui-date-picker-pro--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-range-date-picker-pro--fade-top-enter-from,.devui-range-date-picker-pro--fade-top-leave-to,.devui-date-picker-pro--fade-top-enter-from,.devui-date-picker-pro--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-range-date-picker-pro--fade-top-enter-to,.devui-range-date-picker-pro--fade-top-leave-from,.devui-date-picker-pro--fade-top-enter-to,.devui-date-picker-pro--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-range-date-picker-pro--fade-top-enter-active,.devui-date-picker-pro--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-range-date-picker-pro--fade-top-leave-active,.devui-date-picker-pro--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-drawer__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--devui-shadow, rgba(37, 43, 58, .24))
}

.drawer-overlay-fade-enter-active,.drawer-overlay-fade-leave-active {
    transition: opacity .1s linear
}

.drawer-overlay-fade-enter-from,.drawer-overlay-fade-leave-to {
    opacity: 0
}

.devui-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-base-bg, #ffffff);
    transform: translate(0);
    opacity: 1;
    overflow: auto;
    box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-drawer--left {
    left: 0
}

.devui-drawer--right {
    right: 0
}

.drawer-fly-right-enter-active {
    transition: all .3s cubic-bezier(.16,.75,.5,1)
}

.drawer-fly-right-leave-active {
    transition: all .3s cubic-bezier(.5,0,.84,.25)
}

.drawer-fly-right-enter-from,.drawer-fly-right-leave-to {
    opacity: 0;
    transform: translate(100%)
}

.drawer-fly-left-enter-active {
    transition: all .3s cubic-bezier(.16,.75,.5,1)
}

.drawer-fly-left-leave-active {
    transition: all .3s cubic-bezier(.5,0,.84,.25)
}

.drawer-fly-left-enter-from,.drawer-fly-left-leave-to {
    opacity: 0;
    transform: translate(-100%)
}

.devui-editable-select-input {
    height: 32px;
    font-size: var(--devui-font-size, 12px)
}

.devui-editable-select-input--sm {
    height: 24px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-editable-select-input--lg {
    height: 40px;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-editable-select-input--open .devui-editable-select__arrow-icon {
    transform: rotate(180deg)
}

.devui-editable-select-input__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    padding: 0 8px;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-editable-select-input__wrapper--focus {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-editable-select-input__wrapper--focus.devui-editable-select-input__wrapper--glow-style {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-editable-select-input__wrapper--disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-editable-select-input__wrapper--disabled:hover {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-editable-select-input__wrapper--disabled .devui-editable-select-input__inner {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-editable-select-input__wrapper--glow-style:not(.devui-editable-select-input__wrapper--disabled,.devui-editable-select-input__wrapper--focus):hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line, #d7d8da)!important
}

.devui-editable-select-input__inner {
    width: 100%;
    height: 100%;
    padding: 4px 0;
    border: none;
    background: none;
    outline: none
}

.devui-editable-select-input__placeholder {
    width: calc(100% - 16px);
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(-50%);
    top: 50%
}

.devui-editable-select-input__suffix {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--devui-font-size, 12px)
}

.devui-editable-select-input__suffix>span {
    align-items: center
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon {
    pointer-events: auto;
    display: flex;
    cursor: pointer
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon svg:hover path {
    fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-editable-select-input__suffix .devui-editable-select__arrow-icon {
    display: flex;
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-editable-select-input__suffix .devui-editable-select__arrow-icon svg path {
    fill: var(--devui-icon-text, #71757f)
}

.devui-editable-select__inner {
    padding: 12px;
    margin: 0;
    list-style: none;
    overflow-y: auto
}

.devui-editable-select__item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    line-height: 20px;
    padding: 8px 12px;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.devui-editable-select__item:not(:first-child) {
    margin-top: 4px
}

.devui-editable-select__item--disabled {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-editable-select__item--selected:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--no-data-tip) {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-editable-select__item--last-selected {
    background: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-editable-select__item--hover:not(.devui-editable-select__item--selected) {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-editable-select__item:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--selected):not(.devui-editable-select__item--no-data-tip):hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-editable-select__item--no-data-tip {
    text-align: center;
    cursor: not-allowed;
    -webkit-user-select: none;
    user-select: none;
    color: var(--devui-disabled-text, #cfd0d3);
    font-size: var(--devui-font-size, 12px);
    line-height: 22px;
    padding: 0
}

.devui-editable-select--fade-bottom-enter-from,.devui-editable-select--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-editable-select--fade-bottom-enter-to,.devui-editable-select--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-editable-select--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-editable-select--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-editable-select--fade-top-enter-from,.devui-editable-select--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-editable-select--fade-top-enter-to,.devui-editable-select--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-editable-select--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-editable-select--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: auto;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-fullscreen__html {
    overflow: hidden
}

:not(:root):fullscreen::backdrop {
    background: var(--devui-base-bg, #ffffff)
}

.devui-tooltip {
    max-width: 200px;
    min-height: 26px;
    padding: 4px 16px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-feedback-overlay-text, #dfe1e6);
    letter-spacing: 0;
    line-height: 1.5;
    background: var(--devui-feedback-overlay-bg, #464d6e);
    box-shadow: none;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    text-align: start;
    border-radius: var(--devui-border-radius-feedback, 4px);
    font-style: normal;
    font-weight: 400;
    line-break: auto;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    word-spacing: normal;
    white-space: normal;
    opacity: 1;
    z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-tooltip--fade-bottom-enter-from,.devui-tooltip--fade-bottom-leave-to,.devui-tooltip--fade-top-enter-from,.devui-tooltip--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8)
}

.devui-tooltip--fade-bottom-enter-to,.devui-tooltip--fade-bottom-leave-from,.devui-tooltip--fade-top-enter-to,.devui-tooltip--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(1)
}

.devui-tooltip--fade-bottom-enter-active,.devui-tooltip--fade-top-enter-active {
    transition: transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)
}

.devui-tooltip--fade-bottom-leave-active,.devui-tooltip--fade-top-leave-active {
    transition: transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)
}

.devui-tooltip--fade-left-enter-from,.devui-tooltip--fade-left-leave-to,.devui-tooltip--fade-right-enter-from,.devui-tooltip--fade-right-leave-to {
    opacity: .8;
    transform: scaleX(.8)
}

.devui-tooltip--fade-left-enter-to,.devui-tooltip--fade-left-leave-from,.devui-tooltip--fade-right-enter-to,.devui-tooltip--fade-right-leave-from {
    opacity: 1;
    transform: scaleX(1)
}

.devui-tooltip--fade-left-enter-active,.devui-tooltip--fade-right-enter-active {
    transition: transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)
}

.devui-tooltip--fade-left-leave-active,.devui-tooltip--fade-right-leave-active {
    transition: transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)
}

.devui-tooltip--with-content {
    max-width: unset;
    padding: 0
}

.md-toolbar-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 20px
}

.md-toolbar-container .md-toolbar-span {
    width: 1px;
    height: 22px;
    margin-right: 12px;
    background: var(--devui-dividing-line, #f2f2f3)
}

.md-toolbar-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    cursor: pointer
}

.md-toolbar-item svg,.md-toolbar-item polygon,.md-toolbar-item path {
    fill: var(--devui-icon-text, #71757f)
}

.md-toolbar-item:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.md-toolbar-item:hover svg,.md-toolbar-item:hover polygon,.md-toolbar-item:hover path {
    fill: var(--devui-brand, #5e7ce0)
}

.md-toolbar-tip-content {
    display: inline-block;
    padding: 4px 16px
}

.dropdown-font-size {
    padding: 0;
    margin: 0
}

.dropdown-font-size li {
    width: 80px;
    padding: 4px 8px;
    list-style: none;
    cursor: pointer
}

.dropdown-font-size li:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.dropdown-font-color {
    display: inline-flex;
    width: 352px
}

.dropdown-font-color .color-wrap {
    width: 50%;
    padding-left: 4px
}

.dropdown-font-color .color-wrap p {
    line-height: 38px;
    padding: 0;
    margin: 0
}

.dropdown-font-color .color-picker {
    display: flex;
    flex-wrap: wrap;
    width: 172px;
    padding: 0;
    margin: 0
}

.dropdown-font-color .color-picker li {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 2px 2px;
    padding: 0;
    list-style: none;
    cursor: pointer
}

.dropdown-font-color .color-picker li:hover {
    border: 2px solid var(--devui-link-light-active, #beccfa)
}

.CodeMirror {
    font-family: monospace;
    height: 300px;
    color: #000;
    direction: ltr
}

.CodeMirror-lines {
    padding: 4px 0
}

.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    padding: 0 4px
}

.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler {
    background-color: #fff
}

.CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap
}

.CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: #999;
    white-space: nowrap
}

.CodeMirror-guttermarker {
    color: #000
}

.CodeMirror-guttermarker-subtle {
    color: #999
}

.CodeMirror-cursor {
    border-left: 1px solid black;
    border-right: none;
    width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0!important;
    background: #7e7
}

.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1
}

.cm-fat-cursor-mark {
    background-color: #14ff1480;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite
}

.cm-animate-fat-cursor {
    width: auto;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
    background-color: #7e7
}

@-moz-keyframes blink {
    50% {
        background-color: transparent
    }
}

@-webkit-keyframes blink {
    50% {
        background-color: transparent
    }
}

@keyframes blink {
    50% {
        background-color: transparent
    }
}

.cm-tab {
    display: inline-block;
    text-decoration: inherit
}

.CodeMirror-rulers {
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    bottom: 0;
    overflow: hidden
}

.CodeMirror-ruler {
    border-left: 1px solid #ccc;
    top: 0;
    bottom: 0;
    position: absolute
}

.cm-s-default .cm-header {
    color: #00f
}

.cm-s-default .cm-quote {
    color: #090
}

.cm-negative {
    color: #d44
}

.cm-positive {
    color: #292
}

.cm-header,.cm-strong {
    font-weight: 700
}

.cm-em {
    font-style: italic
}

.cm-link {
    text-decoration: underline
}

.cm-strikethrough {
    text-decoration: line-through
}

.cm-s-default .cm-keyword {
    color: #708
}

.cm-s-default .cm-atom {
    color: #219
}

.cm-s-default .cm-number {
    color: #164
}

.cm-s-default .cm-def {
    color: #00f
}

.cm-s-default .cm-variable-2 {
    color: #05a
}

.cm-s-default .cm-variable-3,.cm-s-default .cm-type {
    color: #085
}

.cm-s-default .cm-comment {
    color: #a50
}

.cm-s-default .cm-string {
    color: #a11
}

.cm-s-default .cm-string-2 {
    color: #f50
}

.cm-s-default .cm-meta,.cm-s-default .cm-qualifier {
    color: #555
}

.cm-s-default .cm-builtin {
    color: #30a
}

.cm-s-default .cm-bracket {
    color: #997
}

.cm-s-default .cm-tag {
    color: #170
}

.cm-s-default .cm-attribute {
    color: #00c
}

.cm-s-default .cm-hr {
    color: #999
}

.cm-s-default .cm-link {
    color: #00c
}

.cm-s-default .cm-error,.cm-invalidchar {
    color: red
}

.CodeMirror-composing {
    border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #a22
}

.CodeMirror-matchingtag {
    background: #ff96004d
}

.CodeMirror-activeline-background {
    background: #e8f2ff
}

.CodeMirror {
    position: relative;
    overflow: hidden;
    background: #fff
}

.CodeMirror-scroll {
    overflow: scroll!important;
    margin-bottom: -50px;
    margin-right: -50px;
    padding-bottom: 50px;
    height: 100%;
    outline: none;
    position: relative
}

.CodeMirror-sizer {
    position: relative;
    border-right: 50px solid transparent
}

.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
    outline: none
}

.CodeMirror-vscrollbar {
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll
}

.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: scroll
}

.CodeMirror-scrollbar-filler {
    right: 0;
    bottom: 0
}

.CodeMirror-gutter-filler {
    left: 0;
    bottom: 0
}

.CodeMirror-gutters {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    z-index: 3
}

.CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -50px
}

.CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    background: none!important;
    border: none!important
}

.CodeMirror-gutter-background {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4
}

.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
    background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
    background-color: transparent
}

.CodeMirror-lines {
    cursor: text;
    min-height: 1px
}

.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual
}

.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal
}

.CodeMirror-linebackground {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0
}

.CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    padding: .1px
}

.CodeMirror-rtl pre {
    direction: rtl
}

.CodeMirror-code {
    outline: none
}

.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber {
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

.CodeMirror-cursor {
    position: absolute;
    pointer-events: none
}

.CodeMirror-measure pre {
    position: static
}

div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3
}

div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible
}

.CodeMirror-selected {
    background: #d9d9d9
}

.CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0
}

.CodeMirror-crosshair {
    cursor: crosshair
}

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection {
    background: #d7d4f0
}

.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection {
    background: #d7d4f0
}

.cm-searching {
    background-color: #ffa;
    background-color: #ff06
}

.cm-force-border {
    padding-right: .1px
}

@media print {
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden
    }
}

.cm-tab-wrap-hack:after {
    content: ""
}

span.CodeMirror-selectedtext {
    background: none
}

.dp-md-view {
    font-size: 14px
}

.dp-md-view p {
    word-wrap: break-word;
    margin: 0 0 10px;
    padding: 0
}

.dp-md-view ul {
    list-style-type: disc;
    padding-left: 16px
}

.dp-md-view ol {
    list-style-type: decimal;
    padding-left: 24px
}

.dp-md-view h1 {
    position: relative;
    color: var(--devui-text, #252b3a);
    font-weight: 700;
    font-size: 28px
}

.dp-md-view table {
    margin-bottom: 10px;
    border-collapse: collapse;
    display: table
}

.dp-md-view td,.dp-md-view th {
    padding: 5px 10px;
    border: 1px solid var(--devui-dividing-line, #f2f2f3);
    background-color: var(--devui-base-bg, #ffffff)
}

.dp-md-view caption {
    border: 1px dashed var(--devui-line, #d7d8da);
    border-bottom: 0;
    padding: 3px;
    text-align: center
}

.dp-md-view th {
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
    background-color: var(--devui-global-bg, #f6f6f8)
}

.dp-md-view .ue-table-interlace-color-single {
    background-color: var(--devui-base-bg, #ffffff)
}

.dp-md-view .ue-table-interlace-color-double {
    background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.dp-md-view td p {
    margin: 0;
    padding: 0
}

.dp-md-view code {
    color: #c7254e
}

.dp-md-view pre,.dp-md-view pre code {
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-area, #f5f5f5);
    padding: .5em;
    font-size: 12px
}

.dp-md-view pre.hljs,.dp-md-view pre code.hljs {
    background-color: var(--devui-area, #f5f5f5)
}

.dp-md-view .h1,.dp-md-view .h2,.dp-md-view .h3,.dp-md-view .h4,.dp-md-view .h5,.dp-md-view .h6,.dp-md-view h1,.dp-md-view h2,.dp-md-view h3,.dp-md-view h4,.dp-md-view h5,.dp-md-view h6 {
    line-height: 1.1
}

.dp-md-view blockquote {
    padding: 0 8px;
    margin: 0;
    color: var(--devui-text-weak, #575d6c);
    border-left: 5px solid var(--devui-dividing-line, #f2f2f3)
}

.dp-md-view a {
    color: var(--devui-link, #526ecc);
    text-decoration: underline;
    cursor: pointer
}

.dp-md-view a:hover {
    color: var(--devui-link-active, #526ecc)
}

.dp-md-view img {
    max-width: 100%
}

.dp-md-view input[type=checkbox] {
    vertical-align: middle
}

.dp-md-view .hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: var(--devui-text, #252b3a)
}

.dp-md-view .hljs-comment,.dp-md-view .hljs-quote {
    color: #998;
    font-style: italic
}

.dp-md-view .hljs-keyword,.dp-md-view .hljs-selector-tag,.dp-md-view .hljs-subst {
    color: var(--devui-text, #252b3a);
    font-weight: 700
}

.dp-md-view .hljs-number,.dp-md-view .hljs-literal,.dp-md-view .hljs-variable,.dp-md-view .hljs-template-variable,.dp-md-view .hljs-tag .hljs-attr {
    color: var(--devui-warning-line, #fa9841)
}

.dp-md-view .hljs-string,.dp-md-view .hljs-doctag {
    color: var(--devui-danger-line, #f66f6a)
}

.dp-md-view .hljs-title,.dp-md-view .hljs-section,.dp-md-view .hljs-selector-id {
    color: var(--devui-danger-line, #f66f6a);
    font-weight: 700
}

.dp-md-view .hljs-subst {
    font-weight: 400
}

.dp-md-view .hljs-type,.dp-md-view .hljs-class .hljs-title {
    font-weight: 700;
    color: #458
}

.dp-md-view .hljs-tag,.dp-md-view .hljs-name,.dp-md-view .hljs-attribute {
    color: navy;
    font-weight: 400
}

.dp-md-view .hljs-symbol,.dp-md-view .hljs-bullet {
    color: #990073
}

.dp-md-view .hljs-built_in,.dp-md-view .hljs-builtin-name {
    color: #0086b3
}

.dp-md-view .hljs-meta {
    color: #999;
    font-weight: 700
}

.dp-md-view .hljs-deletion {
    background: #fdd
}

.dp-md-view .hljs-addition {
    background: #dfd
}

.dp-md-view .hljs-emphasis {
    font-style: italic
}

.dp-md-view .hljs-strong {
    font-weight: 700
}

.dp-md-view.devui-md-view-dark .hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #abb2bf
}

.dp-md-view.devui-md-view-dark .hljs-comment,.dp-md-view.devui-md-view-dark .hljs-quote {
    color: #5c6370;
    font-style: italic
}

.dp-md-view.devui-md-view-dark .hljs-doctag,.dp-md-view.devui-md-view-dark .hljs-keyword,.dp-md-view.devui-md-view-dark .hljs-formula {
    color: #c678dd
}

.dp-md-view.devui-md-view-dark .hljs-section,.dp-md-view.devui-md-view-dark .hljs-name,.dp-md-view.devui-md-view-dark .hljs-selector-tag,.dp-md-view.devui-md-view-dark .hljs-deletion,.dp-md-view.devui-md-view-dark .hljs-subst {
    color: #e06c75
}

.dp-md-view.devui-md-view-dark .hljs-literal {
    color: #56b6c2
}

.dp-md-view.devui-md-view-dark .hljs-string,.dp-md-view.devui-md-view-dark .hljs-regexp,.dp-md-view.devui-md-view-dark .hljs-addition,.dp-md-view.devui-md-view-dark .hljs-attribute,.dp-md-view.devui-md-view-dark .hljs-meta-string {
    color: #98c379
}

.dp-md-view.devui-md-view-dark .hljs-built_in,.dp-md-view.devui-md-view-dark .hljs-class .hljs-title {
    color: #e6c07b
}

.dp-md-view.devui-md-view-dark .hljs-attr,.dp-md-view.devui-md-view-dark .hljs-variable,.dp-md-view.devui-md-view-dark .hljs-template-variable,.dp-md-view.devui-md-view-dark .hljs-type,.dp-md-view.devui-md-view-dark .hljs-selector-class,.dp-md-view.devui-md-view-dark .hljs-selector-attr,.dp-md-view.devui-md-view-dark .hljs-selector-pseudo,.dp-md-view.devui-md-view-dark .hljs-number {
    color: #d19a66
}

.dp-md-view.devui-md-view-dark .hljs-symbol,.dp-md-view.devui-md-view-dark .hljs-bullet,.dp-md-view.devui-md-view-dark .hljs-link,.dp-md-view.devui-md-view-dark .hljs-meta,.dp-md-view.devui-md-view-dark .hljs-selector-id,.dp-md-view.devui-md-view-dark .hljs-title {
    color: #61aeee
}

.dp-md-view.devui-md-view-dark .hljs-emphasis {
    font-style: italic
}

.dp-md-view.devui-md-view-dark .hljs-strong {
    font-weight: 700
}

.dp-md-view.devui-md-view-dark .hljs-link {
    text-decoration: underline
}

.dp-md-container {
    display: block;
    height: 100%;
    font-family: helvetica,arial,PingFang,Microsoft YaHei,Hiragino Sans GB,Microsoft JhengHei,sans-serif;
    font-size: 14px;
    border: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-radius: var(--devui-border-radius, 2px)
}

.dp-md-container .CodeMirror-lines {
    padding: 20px 0
}

.dp-md-container .CodeMirror pre {
    padding: 0 20px
}

.dp-md-container .CodeMirror pre.CodeMirror-line,.dp-md-container .CodeMirror pre.CodeMirror-line-like {
    color: var(--devui-text, #252b3a);
    font-family: helvetica,arial,PingFang,Microsoft YaHei,Hiragino Sans GB,Microsoft JhengHei,sans-serif
}

.dp-md-container .dp-md-toolbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 8px 0;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0
}

.dp-md-container.dp-md-readonly .dp-md-content-container,.dp-md-container.dp-md-editonly .dp-md-content-container {
    position: relative;
    z-index: 0
}

.dp-md-container.dp-md-readonly .dp-md-content-container .dp-md-editor,.dp-md-container.dp-md-readonly .dp-md-content-container .dp-editor-md-preview-container,.dp-md-container.dp-md-editonly .dp-md-content-container .dp-md-editor,.dp-md-container.dp-md-editonly .dp-md-content-container .dp-editor-md-preview-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.dp-md-container.dp-md-readonly .dp-md-content-container .dp-md-editor {
    z-index: -1
}

.dp-md-container.dp-md-readonly .dp-md-toolbar-container {
    opacity: .3;
    pointer-events: none
}

.dp-md-container.dp-md-readonly .dp-md-content-container .dp-editor-md-preview-container {
    border-left: none
}

.dp-md-container.dp-md-editonly .dp-md-content-container .dp-editor-md-preview-container {
    z-index: -1
}

.dp-md-container .dp-md-content-container {
    display: flex;
    height: calc(100% - 52px);
    min-height: 250px
}

.dp-md-container .dp-md-content-container .CodeMirror-scroll {
    padding-top: 5px
}

.dp-md-container .dp-md-content-container .dp-md-editor {
    position: relative;
    width: 50%;
    flex-shrink: 0
}

.dp-md-container .dp-md-content-container .dp-md-editor .dp-md-count {
    display: inline-block;
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 12px;
    color: var(--devui-aide-text, #71757f)
}

.dp-md-container .dp-md-content-container .dp-editor-md-preview-container {
    width: 50%;
    flex-shrink: 0;
    padding: 20px;
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-bottom-right-radius: var(--devui-border-radius, 2px);
    overflow-y: auto;
    background-color: var(--devui-base-bg, #ffffff)
}

.dp-md-container .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
    color: var(--devui-line, #d7d8da)
}

.dp-md-container input[type=checkbox]+label {
    margin-left: 6px
}

.dp-editor-md-preview-container.dp-md-view {
    overflow-y: auto
}

.dp-md-view pre code {
    display: block;
    overflow-x: auto;
    line-height: 1.5
}

.devui-gantt-scale-wrapper {
    display: block;
    height: 36px;
    line-height: 18px
}

.devui-gantt-scale {
    display: inline-block;
    color: var(--devui-placeholder, #babbc0);
    text-align: center;
    position: absolute;
    height: 36px;
    font-weight: 400
}

.devui-gantt-scale.day:not(.milestone):hover .devui-scale-start {
    display: none
}

.devui-gantt-scale.day.milestone {
    background-image: linear-gradient(180deg,#fecc5500,#3ecca61a)
}

.devui-gantt-scale .devui-scale-start {
    width: 100%;
    height: 18px;
    position: absolute;
    left: 1px;
    white-space: nowrap
}

.devui-gantt-scale .devui-scale-start.milestone {
    color: var(--devui-success, #50d4ab)
}

.devui-gantt-scale .devui-scale-unit {
    height: 18px;
    position: absolute;
    top: 18px;
    width: 100%
}

.devui-gantt-scale .devui-scale-unit .border-left {
    height: 18px;
    border-left: 1px solid var(--devui-list-item-selected-bg, #f2f5fc)
}

.devui-gantt-scale .devui-scale-unit .scale-highlight {
    position: absolute;
    height: 18px;
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-brand, #5e7ce0);
    padding: 0 4px
}

.devui-gantt-scale .devui-scale-unit .scale-highlight div {
    color: var(--devui-base-bg, #ffffff);
    font-size: var(--devui-font-size, 12px);
    font-weight: 400
}

.devui-gantt-scale .devui-scale-unit .today {
    background: #ff790e33;
    border-radius: var(--devui-border-radius, 2px);
    height: 16px
}

.devui-gantt-scale .milestone-new {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    margin-left: 16px;
    border: 1px solid var(--devui-list-item-selected-bg, #f2f5fc);
    cursor: pointer
}

.devui-gantt-scale .milestone-new div {
    line-height: 16px
}

.devui-gantt-scale:not(.milestone):hover .milestone-new.day {
    display: block
}

.devui-mark-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 1;
    background: var(--devui-line, #d7d8da);
    opacity: .5
}

.devui-mark-line.today {
    opacity: .2;
    background: #ff790e
}

.devui-mark-line.today.day {
    margin-left: 24px
}

.devui-mark-line.today.week {
    margin-left: 9px
}

.devui-mark-line.today.month {
    margin-left: 4px
}

.devui-mark-line.milestone {
    opacity: .2;
    background: var(--devui-success, #50d4ab)
}

.devui-mark-line.milestone.day {
    margin-left: 24px
}

.devui-mark-line.milestone.week {
    margin-left: 9px
}

.devui-mark-line.milestone.month {
    margin-left: 4px
}

.devui-mark-stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(45deg,rgba(202,207,216,.2) 0,rgba(202,207,216,.2) 10%,transparent 10%,transparent 50%,rgba(202,207,216,.2) 50%,rgba(202,207,216,.2) 60%,transparent 60%,transparent);
    background-size: 6px 6px
}

.devui-mark-stripe.day {
    width: 100px
}

.devui-mark-stripe.week {
    width: 40px
}

.devui-mark-stripe.month {
    width: 20px
}

.tools-container {
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 10
}

.tools-container .devui-dropdown-origin {
    border: 0
}

.tools-container .devui-dropdown-origin:hover {
    color: var(--devui-link, #526ecc)!important
}

.tools-container .devui-btn {
    height: 32px!important;
    color: var(--devui-text, #252b3a)!important;
    padding: 0 8px!important;
    min-width: 50px
}

.tools-container .devui-btn:hover {
    color: var(--devui-link, #526ecc)!important
}

.tools-container .tool.minus .devui-btn,.tools-container .tool.add .devui-btn {
    min-width: 30px
}

.tools-container .devui-select-selection {
    width: 90px
}

.tools-container .devui-select-selection .devui-select-input {
    height: 32px
}

.tool.disabled {
    opacity: .5
}

.tool .switch-view {
    padding: 0 8px
}

.tool .switch-view:hover {
    color: var(--devui-link, #526ecc)!important
}

.devui-dropdown-menu {
    top: 10px!important;
    left: -6px!important
}

.gantt-container {
    overflow: scroll
}

.gantt-container .header {
    position: relative;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.gantt-container .body {
    position: relative;
    min-height: 400px;
    height: 100%
}

.gantt-container .body .item {
    height: 40px;
    padding-top: 8px
}

.tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-left: 12px;
    background-color: var(--devui-base-bg, #ffffff);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) #5170ff66;
    cursor: pointer
}

.tool span {
    border: 0!important
}

.d-graph-wrapper {
    overflow-x: auto
}

.devui-row {
    display: flex
}

.devui-row__wrap {
    flex-wrap: wrap
}

.devui-row__align--top {
    align-items: flex-start
}

.devui-row__align--middle {
    align-items: center
}

.devui-row__align--bottom {
    align-items: flex-end
}

.devui-row__justify--start {
    justify-content: flex-start
}

.devui-row__justify--center {
    justify-content: center
}

.devui-row__justify--end {
    justify-content: flex-end
}

.devui-row__justify--around {
    justify-content: space-around
}

.devui-row__justify--between {
    justify-content: space-between
}

.devui-col {
    position: relative;
    max-width: 100%;
    min-height: 1px
}

.devui-col__span--0,.devui-col__xs--span-0 {
    display: none
}

.devui-col__offset--1 {
    margin-left: 4.1666666667%
}

.devui-col__pull--1 {
    right: 4.1666666667%
}

.devui-col__push--1 {
    left: 4.1666666667%
}

.devui-col__span--1 {
    display: block;
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%
}

.devui-col__xs--offset-1 {
    margin-left: 4.1666666667%
}

.devui-col__xs--pull-1 {
    right: 4.1666666667%
}

.devui-col__xs--push-1 {
    left: 4.1666666667%
}

.devui-col__xs--span-1 {
    display: block;
    flex: 0 0 4.1666666667%;
    width: 4.1666666667%
}

.devui-col__offset--2 {
    margin-left: 8.3333333333%
}

.devui-col__pull--2 {
    right: 8.3333333333%
}

.devui-col__push--2 {
    left: 8.3333333333%
}

.devui-col__span--2 {
    display: block;
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%
}

.devui-col__xs--offset-2 {
    margin-left: 8.3333333333%
}

.devui-col__xs--pull-2 {
    right: 8.3333333333%
}

.devui-col__xs--push-2 {
    left: 8.3333333333%
}

.devui-col__xs--span-2 {
    display: block;
    flex: 0 0 8.3333333333%;
    width: 8.3333333333%
}

.devui-col__offset--3 {
    margin-left: 12.5%
}

.devui-col__pull--3 {
    right: 12.5%
}

.devui-col__push--3 {
    left: 12.5%
}

.devui-col__span--3 {
    display: block;
    flex: 0 0 12.5%;
    width: 12.5%
}

.devui-col__xs--offset-3 {
    margin-left: 12.5%
}

.devui-col__xs--pull-3 {
    right: 12.5%
}

.devui-col__xs--push-3 {
    left: 12.5%
}

.devui-col__xs--span-3 {
    display: block;
    flex: 0 0 12.5%;
    width: 12.5%
}

.devui-col__offset--4 {
    margin-left: 16.6666666667%
}

.devui-col__pull--4 {
    right: 16.6666666667%
}

.devui-col__push--4 {
    left: 16.6666666667%
}

.devui-col__span--4 {
    display: block;
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%
}

.devui-col__xs--offset-4 {
    margin-left: 16.6666666667%
}

.devui-col__xs--pull-4 {
    right: 16.6666666667%
}

.devui-col__xs--push-4 {
    left: 16.6666666667%
}

.devui-col__xs--span-4 {
    display: block;
    flex: 0 0 16.6666666667%;
    width: 16.6666666667%
}

.devui-col__offset--5 {
    margin-left: 20.8333333333%
}

.devui-col__pull--5 {
    right: 20.8333333333%
}

.devui-col__push--5 {
    left: 20.8333333333%
}

.devui-col__span--5 {
    display: block;
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%
}

.devui-col__xs--offset-5 {
    margin-left: 20.8333333333%
}

.devui-col__xs--pull-5 {
    right: 20.8333333333%
}

.devui-col__xs--push-5 {
    left: 20.8333333333%
}

.devui-col__xs--span-5 {
    display: block;
    flex: 0 0 20.8333333333%;
    width: 20.8333333333%
}

.devui-col__offset--6 {
    margin-left: 25%
}

.devui-col__pull--6 {
    right: 25%
}

.devui-col__push--6 {
    left: 25%
}

.devui-col__span--6 {
    display: block;
    flex: 0 0 25%;
    width: 25%
}

.devui-col__xs--offset-6 {
    margin-left: 25%
}

.devui-col__xs--pull-6 {
    right: 25%
}

.devui-col__xs--push-6 {
    left: 25%
}

.devui-col__xs--span-6 {
    display: block;
    flex: 0 0 25%;
    width: 25%
}

.devui-col__offset--7 {
    margin-left: 29.1666666667%
}

.devui-col__pull--7 {
    right: 29.1666666667%
}

.devui-col__push--7 {
    left: 29.1666666667%
}

.devui-col__span--7 {
    display: block;
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%
}

.devui-col__xs--offset-7 {
    margin-left: 29.1666666667%
}

.devui-col__xs--pull-7 {
    right: 29.1666666667%
}

.devui-col__xs--push-7 {
    left: 29.1666666667%
}

.devui-col__xs--span-7 {
    display: block;
    flex: 0 0 29.1666666667%;
    width: 29.1666666667%
}

.devui-col__offset--8 {
    margin-left: 33.3333333333%
}

.devui-col__pull--8 {
    right: 33.3333333333%
}

.devui-col__push--8 {
    left: 33.3333333333%
}

.devui-col__span--8 {
    display: block;
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%
}

.devui-col__xs--offset-8 {
    margin-left: 33.3333333333%
}

.devui-col__xs--pull-8 {
    right: 33.3333333333%
}

.devui-col__xs--push-8 {
    left: 33.3333333333%
}

.devui-col__xs--span-8 {
    display: block;
    flex: 0 0 33.3333333333%;
    width: 33.3333333333%
}

.devui-col__offset--9 {
    margin-left: 37.5%
}

.devui-col__pull--9 {
    right: 37.5%
}

.devui-col__push--9 {
    left: 37.5%
}

.devui-col__span--9 {
    display: block;
    flex: 0 0 37.5%;
    width: 37.5%
}

.devui-col__xs--offset-9 {
    margin-left: 37.5%
}

.devui-col__xs--pull-9 {
    right: 37.5%
}

.devui-col__xs--push-9 {
    left: 37.5%
}

.devui-col__xs--span-9 {
    display: block;
    flex: 0 0 37.5%;
    width: 37.5%
}

.devui-col__offset--10 {
    margin-left: 41.6666666667%
}

.devui-col__pull--10 {
    right: 41.6666666667%
}

.devui-col__push--10 {
    left: 41.6666666667%
}

.devui-col__span--10 {
    display: block;
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%
}

.devui-col__xs--offset-10 {
    margin-left: 41.6666666667%
}

.devui-col__xs--pull-10 {
    right: 41.6666666667%
}

.devui-col__xs--push-10 {
    left: 41.6666666667%
}

.devui-col__xs--span-10 {
    display: block;
    flex: 0 0 41.6666666667%;
    width: 41.6666666667%
}

.devui-col__offset--11 {
    margin-left: 45.8333333333%
}

.devui-col__pull--11 {
    right: 45.8333333333%
}

.devui-col__push--11 {
    left: 45.8333333333%
}

.devui-col__span--11 {
    display: block;
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%
}

.devui-col__xs--offset-11 {
    margin-left: 45.8333333333%
}

.devui-col__xs--pull-11 {
    right: 45.8333333333%
}

.devui-col__xs--push-11 {
    left: 45.8333333333%
}

.devui-col__xs--span-11 {
    display: block;
    flex: 0 0 45.8333333333%;
    width: 45.8333333333%
}

.devui-col__offset--12 {
    margin-left: 50%
}

.devui-col__pull--12 {
    right: 50%
}

.devui-col__push--12 {
    left: 50%
}

.devui-col__span--12 {
    display: block;
    flex: 0 0 50%;
    width: 50%
}

.devui-col__xs--offset-12 {
    margin-left: 50%
}

.devui-col__xs--pull-12 {
    right: 50%
}

.devui-col__xs--push-12 {
    left: 50%
}

.devui-col__xs--span-12 {
    display: block;
    flex: 0 0 50%;
    width: 50%
}

.devui-col__offset--13 {
    margin-left: 54.1666666667%
}

.devui-col__pull--13 {
    right: 54.1666666667%
}

.devui-col__push--13 {
    left: 54.1666666667%
}

.devui-col__span--13 {
    display: block;
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%
}

.devui-col__xs--offset-13 {
    margin-left: 54.1666666667%
}

.devui-col__xs--pull-13 {
    right: 54.1666666667%
}

.devui-col__xs--push-13 {
    left: 54.1666666667%
}

.devui-col__xs--span-13 {
    display: block;
    flex: 0 0 54.1666666667%;
    width: 54.1666666667%
}

.devui-col__offset--14 {
    margin-left: 58.3333333333%
}

.devui-col__pull--14 {
    right: 58.3333333333%
}

.devui-col__push--14 {
    left: 58.3333333333%
}

.devui-col__span--14 {
    display: block;
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%
}

.devui-col__xs--offset-14 {
    margin-left: 58.3333333333%
}

.devui-col__xs--pull-14 {
    right: 58.3333333333%
}

.devui-col__xs--push-14 {
    left: 58.3333333333%
}

.devui-col__xs--span-14 {
    display: block;
    flex: 0 0 58.3333333333%;
    width: 58.3333333333%
}

.devui-col__offset--15 {
    margin-left: 62.5%
}

.devui-col__pull--15 {
    right: 62.5%
}

.devui-col__push--15 {
    left: 62.5%
}

.devui-col__span--15 {
    display: block;
    flex: 0 0 62.5%;
    width: 62.5%
}

.devui-col__xs--offset-15 {
    margin-left: 62.5%
}

.devui-col__xs--pull-15 {
    right: 62.5%
}

.devui-col__xs--push-15 {
    left: 62.5%
}

.devui-col__xs--span-15 {
    display: block;
    flex: 0 0 62.5%;
    width: 62.5%
}

.devui-col__offset--16 {
    margin-left: 66.6666666667%
}

.devui-col__pull--16 {
    right: 66.6666666667%
}

.devui-col__push--16 {
    left: 66.6666666667%
}

.devui-col__span--16 {
    display: block;
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%
}

.devui-col__xs--offset-16 {
    margin-left: 66.6666666667%
}

.devui-col__xs--pull-16 {
    right: 66.6666666667%
}

.devui-col__xs--push-16 {
    left: 66.6666666667%
}

.devui-col__xs--span-16 {
    display: block;
    flex: 0 0 66.6666666667%;
    width: 66.6666666667%
}

.devui-col__offset--17 {
    margin-left: 70.8333333333%
}

.devui-col__pull--17 {
    right: 70.8333333333%
}

.devui-col__push--17 {
    left: 70.8333333333%
}

.devui-col__span--17 {
    display: block;
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%
}

.devui-col__xs--offset-17 {
    margin-left: 70.8333333333%
}

.devui-col__xs--pull-17 {
    right: 70.8333333333%
}

.devui-col__xs--push-17 {
    left: 70.8333333333%
}

.devui-col__xs--span-17 {
    display: block;
    flex: 0 0 70.8333333333%;
    width: 70.8333333333%
}

.devui-col__offset--18 {
    margin-left: 75%
}

.devui-col__pull--18 {
    right: 75%
}

.devui-col__push--18 {
    left: 75%
}

.devui-col__span--18 {
    display: block;
    flex: 0 0 75%;
    width: 75%
}

.devui-col__xs--offset-18 {
    margin-left: 75%
}

.devui-col__xs--pull-18 {
    right: 75%
}

.devui-col__xs--push-18 {
    left: 75%
}

.devui-col__xs--span-18 {
    display: block;
    flex: 0 0 75%;
    width: 75%
}

.devui-col__offset--19 {
    margin-left: 79.1666666667%
}

.devui-col__pull--19 {
    right: 79.1666666667%
}

.devui-col__push--19 {
    left: 79.1666666667%
}

.devui-col__span--19 {
    display: block;
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%
}

.devui-col__xs--offset-19 {
    margin-left: 79.1666666667%
}

.devui-col__xs--pull-19 {
    right: 79.1666666667%
}

.devui-col__xs--push-19 {
    left: 79.1666666667%
}

.devui-col__xs--span-19 {
    display: block;
    flex: 0 0 79.1666666667%;
    width: 79.1666666667%
}

.devui-col__offset--20 {
    margin-left: 83.3333333333%
}

.devui-col__pull--20 {
    right: 83.3333333333%
}

.devui-col__push--20 {
    left: 83.3333333333%
}

.devui-col__span--20 {
    display: block;
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%
}

.devui-col__xs--offset-20 {
    margin-left: 83.3333333333%
}

.devui-col__xs--pull-20 {
    right: 83.3333333333%
}

.devui-col__xs--push-20 {
    left: 83.3333333333%
}

.devui-col__xs--span-20 {
    display: block;
    flex: 0 0 83.3333333333%;
    width: 83.3333333333%
}

.devui-col__offset--21 {
    margin-left: 87.5%
}

.devui-col__pull--21 {
    right: 87.5%
}

.devui-col__push--21 {
    left: 87.5%
}

.devui-col__span--21 {
    display: block;
    flex: 0 0 87.5%;
    width: 87.5%
}

.devui-col__xs--offset-21 {
    margin-left: 87.5%
}

.devui-col__xs--pull-21 {
    right: 87.5%
}

.devui-col__xs--push-21 {
    left: 87.5%
}

.devui-col__xs--span-21 {
    display: block;
    flex: 0 0 87.5%;
    width: 87.5%
}

.devui-col__offset--22 {
    margin-left: 91.6666666667%
}

.devui-col__pull--22 {
    right: 91.6666666667%
}

.devui-col__push--22 {
    left: 91.6666666667%
}

.devui-col__span--22 {
    display: block;
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%
}

.devui-col__xs--offset-22 {
    margin-left: 91.6666666667%
}

.devui-col__xs--pull-22 {
    right: 91.6666666667%
}

.devui-col__xs--push-22 {
    left: 91.6666666667%
}

.devui-col__xs--span-22 {
    display: block;
    flex: 0 0 91.6666666667%;
    width: 91.6666666667%
}

.devui-col__offset--23 {
    margin-left: 95.8333333333%
}

.devui-col__pull--23 {
    right: 95.8333333333%
}

.devui-col__push--23 {
    left: 95.8333333333%
}

.devui-col__span--23 {
    display: block;
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%
}

.devui-col__xs--offset-23 {
    margin-left: 95.8333333333%
}

.devui-col__xs--pull-23 {
    right: 95.8333333333%
}

.devui-col__xs--push-23 {
    left: 95.8333333333%
}

.devui-col__xs--span-23 {
    display: block;
    flex: 0 0 95.8333333333%;
    width: 95.8333333333%
}

.devui-col__offset--24 {
    margin-left: 100%
}

.devui-col__pull--24 {
    right: 100%
}

.devui-col__push--24 {
    left: 100%
}

.devui-col__span--24 {
    display: block;
    flex: 0 0 100%;
    width: 100%
}

.devui-col__xs--offset-24 {
    margin-left: 100%
}

.devui-col__xs--pull-24 {
    right: 100%
}

.devui-col__xs--push-24 {
    left: 100%
}

.devui-col__xs--span-24 {
    display: block;
    flex: 0 0 100%;
    width: 100%
}

@media screen and (min-width: 576px) {
    .devui-col__sm--span-0 {
        display:none
    }

    .devui-col__sm--offset-1 {
        margin-left: 4.1666666667%
    }

    .devui-col__sm--pull-1 {
        right: 4.1666666667%
    }

    .devui-col__sm--push-1 {
        left: 4.1666666667%
    }

    .devui-col__sm--span-1 {
        display: block;
        flex: 0 0 4.1666666667%;
        width: 4.1666666667%
    }

    .devui-col__sm--offset-2 {
        margin-left: 8.3333333333%
    }

    .devui-col__sm--pull-2 {
        right: 8.3333333333%
    }

    .devui-col__sm--push-2 {
        left: 8.3333333333%
    }

    .devui-col__sm--span-2 {
        display: block;
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%
    }

    .devui-col__sm--offset-3 {
        margin-left: 12.5%
    }

    .devui-col__sm--pull-3 {
        right: 12.5%
    }

    .devui-col__sm--push-3 {
        left: 12.5%
    }

    .devui-col__sm--span-3 {
        display: block;
        flex: 0 0 12.5%;
        width: 12.5%
    }

    .devui-col__sm--offset-4 {
        margin-left: 16.6666666667%
    }

    .devui-col__sm--pull-4 {
        right: 16.6666666667%
    }

    .devui-col__sm--push-4 {
        left: 16.6666666667%
    }

    .devui-col__sm--span-4 {
        display: block;
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%
    }

    .devui-col__sm--offset-5 {
        margin-left: 20.8333333333%
    }

    .devui-col__sm--pull-5 {
        right: 20.8333333333%
    }

    .devui-col__sm--push-5 {
        left: 20.8333333333%
    }

    .devui-col__sm--span-5 {
        display: block;
        flex: 0 0 20.8333333333%;
        width: 20.8333333333%
    }

    .devui-col__sm--offset-6 {
        margin-left: 25%
    }

    .devui-col__sm--pull-6 {
        right: 25%
    }

    .devui-col__sm--push-6 {
        left: 25%
    }

    .devui-col__sm--span-6 {
        display: block;
        flex: 0 0 25%;
        width: 25%
    }

    .devui-col__sm--offset-7 {
        margin-left: 29.1666666667%
    }

    .devui-col__sm--pull-7 {
        right: 29.1666666667%
    }

    .devui-col__sm--push-7 {
        left: 29.1666666667%
    }

    .devui-col__sm--span-7 {
        display: block;
        flex: 0 0 29.1666666667%;
        width: 29.1666666667%
    }

    .devui-col__sm--offset-8 {
        margin-left: 33.3333333333%
    }

    .devui-col__sm--pull-8 {
        right: 33.3333333333%
    }

    .devui-col__sm--push-8 {
        left: 33.3333333333%
    }

    .devui-col__sm--span-8 {
        display: block;
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%
    }

    .devui-col__sm--offset-9 {
        margin-left: 37.5%
    }

    .devui-col__sm--pull-9 {
        right: 37.5%
    }

    .devui-col__sm--push-9 {
        left: 37.5%
    }

    .devui-col__sm--span-9 {
        display: block;
        flex: 0 0 37.5%;
        width: 37.5%
    }

    .devui-col__sm--offset-10 {
        margin-left: 41.6666666667%
    }

    .devui-col__sm--pull-10 {
        right: 41.6666666667%
    }

    .devui-col__sm--push-10 {
        left: 41.6666666667%
    }

    .devui-col__sm--span-10 {
        display: block;
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%
    }

    .devui-col__sm--offset-11 {
        margin-left: 45.8333333333%
    }

    .devui-col__sm--pull-11 {
        right: 45.8333333333%
    }

    .devui-col__sm--push-11 {
        left: 45.8333333333%
    }

    .devui-col__sm--span-11 {
        display: block;
        flex: 0 0 45.8333333333%;
        width: 45.8333333333%
    }

    .devui-col__sm--offset-12 {
        margin-left: 50%
    }

    .devui-col__sm--pull-12 {
        right: 50%
    }

    .devui-col__sm--push-12 {
        left: 50%
    }

    .devui-col__sm--span-12 {
        display: block;
        flex: 0 0 50%;
        width: 50%
    }

    .devui-col__sm--offset-13 {
        margin-left: 54.1666666667%
    }

    .devui-col__sm--pull-13 {
        right: 54.1666666667%
    }

    .devui-col__sm--push-13 {
        left: 54.1666666667%
    }

    .devui-col__sm--span-13 {
        display: block;
        flex: 0 0 54.1666666667%;
        width: 54.1666666667%
    }

    .devui-col__sm--offset-14 {
        margin-left: 58.3333333333%
    }

    .devui-col__sm--pull-14 {
        right: 58.3333333333%
    }

    .devui-col__sm--push-14 {
        left: 58.3333333333%
    }

    .devui-col__sm--span-14 {
        display: block;
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%
    }

    .devui-col__sm--offset-15 {
        margin-left: 62.5%
    }

    .devui-col__sm--pull-15 {
        right: 62.5%
    }

    .devui-col__sm--push-15 {
        left: 62.5%
    }

    .devui-col__sm--span-15 {
        display: block;
        flex: 0 0 62.5%;
        width: 62.5%
    }

    .devui-col__sm--offset-16 {
        margin-left: 66.6666666667%
    }

    .devui-col__sm--pull-16 {
        right: 66.6666666667%
    }

    .devui-col__sm--push-16 {
        left: 66.6666666667%
    }

    .devui-col__sm--span-16 {
        display: block;
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%
    }

    .devui-col__sm--offset-17 {
        margin-left: 70.8333333333%
    }

    .devui-col__sm--pull-17 {
        right: 70.8333333333%
    }

    .devui-col__sm--push-17 {
        left: 70.8333333333%
    }

    .devui-col__sm--span-17 {
        display: block;
        flex: 0 0 70.8333333333%;
        width: 70.8333333333%
    }

    .devui-col__sm--offset-18 {
        margin-left: 75%
    }

    .devui-col__sm--pull-18 {
        right: 75%
    }

    .devui-col__sm--push-18 {
        left: 75%
    }

    .devui-col__sm--span-18 {
        display: block;
        flex: 0 0 75%;
        width: 75%
    }

    .devui-col__sm--offset-19 {
        margin-left: 79.1666666667%
    }

    .devui-col__sm--pull-19 {
        right: 79.1666666667%
    }

    .devui-col__sm--push-19 {
        left: 79.1666666667%
    }

    .devui-col__sm--span-19 {
        display: block;
        flex: 0 0 79.1666666667%;
        width: 79.1666666667%
    }

    .devui-col__sm--offset-20 {
        margin-left: 83.3333333333%
    }

    .devui-col__sm--pull-20 {
        right: 83.3333333333%
    }

    .devui-col__sm--push-20 {
        left: 83.3333333333%
    }

    .devui-col__sm--span-20 {
        display: block;
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%
    }

    .devui-col__sm--offset-21 {
        margin-left: 87.5%
    }

    .devui-col__sm--pull-21 {
        right: 87.5%
    }

    .devui-col__sm--push-21 {
        left: 87.5%
    }

    .devui-col__sm--span-21 {
        display: block;
        flex: 0 0 87.5%;
        width: 87.5%
    }

    .devui-col__sm--offset-22 {
        margin-left: 91.6666666667%
    }

    .devui-col__sm--pull-22 {
        right: 91.6666666667%
    }

    .devui-col__sm--push-22 {
        left: 91.6666666667%
    }

    .devui-col__sm--span-22 {
        display: block;
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%
    }

    .devui-col__sm--offset-23 {
        margin-left: 95.8333333333%
    }

    .devui-col__sm--pull-23 {
        right: 95.8333333333%
    }

    .devui-col__sm--push-23 {
        left: 95.8333333333%
    }

    .devui-col__sm--span-23 {
        display: block;
        flex: 0 0 95.8333333333%;
        width: 95.8333333333%
    }

    .devui-col__sm--offset-24 {
        margin-left: 100%
    }

    .devui-col__sm--pull-24 {
        right: 100%
    }

    .devui-col__sm--push-24 {
        left: 100%
    }

    .devui-col__sm--span-24 {
        display: block;
        flex: 0 0 100%;
        width: 100%
    }
}

@media screen and (min-width: 768px) {
    .devui-col__md--span-0 {
        display:none
    }

    .devui-col__md--offset-1 {
        margin-left: 4.1666666667%
    }

    .devui-col__md--pull-1 {
        right: 4.1666666667%
    }

    .devui-col__md--push-1 {
        left: 4.1666666667%
    }

    .devui-col__md--span-1 {
        display: block;
        flex: 0 0 4.1666666667%;
        width: 4.1666666667%
    }

    .devui-col__md--offset-2 {
        margin-left: 8.3333333333%
    }

    .devui-col__md--pull-2 {
        right: 8.3333333333%
    }

    .devui-col__md--push-2 {
        left: 8.3333333333%
    }

    .devui-col__md--span-2 {
        display: block;
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%
    }

    .devui-col__md--offset-3 {
        margin-left: 12.5%
    }

    .devui-col__md--pull-3 {
        right: 12.5%
    }

    .devui-col__md--push-3 {
        left: 12.5%
    }

    .devui-col__md--span-3 {
        display: block;
        flex: 0 0 12.5%;
        width: 12.5%
    }

    .devui-col__md--offset-4 {
        margin-left: 16.6666666667%
    }

    .devui-col__md--pull-4 {
        right: 16.6666666667%
    }

    .devui-col__md--push-4 {
        left: 16.6666666667%
    }

    .devui-col__md--span-4 {
        display: block;
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%
    }

    .devui-col__md--offset-5 {
        margin-left: 20.8333333333%
    }

    .devui-col__md--pull-5 {
        right: 20.8333333333%
    }

    .devui-col__md--push-5 {
        left: 20.8333333333%
    }

    .devui-col__md--span-5 {
        display: block;
        flex: 0 0 20.8333333333%;
        width: 20.8333333333%
    }

    .devui-col__md--offset-6 {
        margin-left: 25%
    }

    .devui-col__md--pull-6 {
        right: 25%
    }

    .devui-col__md--push-6 {
        left: 25%
    }

    .devui-col__md--span-6 {
        display: block;
        flex: 0 0 25%;
        width: 25%
    }

    .devui-col__md--offset-7 {
        margin-left: 29.1666666667%
    }

    .devui-col__md--pull-7 {
        right: 29.1666666667%
    }

    .devui-col__md--push-7 {
        left: 29.1666666667%
    }

    .devui-col__md--span-7 {
        display: block;
        flex: 0 0 29.1666666667%;
        width: 29.1666666667%
    }

    .devui-col__md--offset-8 {
        margin-left: 33.3333333333%
    }

    .devui-col__md--pull-8 {
        right: 33.3333333333%
    }

    .devui-col__md--push-8 {
        left: 33.3333333333%
    }

    .devui-col__md--span-8 {
        display: block;
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%
    }

    .devui-col__md--offset-9 {
        margin-left: 37.5%
    }

    .devui-col__md--pull-9 {
        right: 37.5%
    }

    .devui-col__md--push-9 {
        left: 37.5%
    }

    .devui-col__md--span-9 {
        display: block;
        flex: 0 0 37.5%;
        width: 37.5%
    }

    .devui-col__md--offset-10 {
        margin-left: 41.6666666667%
    }

    .devui-col__md--pull-10 {
        right: 41.6666666667%
    }

    .devui-col__md--push-10 {
        left: 41.6666666667%
    }

    .devui-col__md--span-10 {
        display: block;
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%
    }

    .devui-col__md--offset-11 {
        margin-left: 45.8333333333%
    }

    .devui-col__md--pull-11 {
        right: 45.8333333333%
    }

    .devui-col__md--push-11 {
        left: 45.8333333333%
    }

    .devui-col__md--span-11 {
        display: block;
        flex: 0 0 45.8333333333%;
        width: 45.8333333333%
    }

    .devui-col__md--offset-12 {
        margin-left: 50%
    }

    .devui-col__md--pull-12 {
        right: 50%
    }

    .devui-col__md--push-12 {
        left: 50%
    }

    .devui-col__md--span-12 {
        display: block;
        flex: 0 0 50%;
        width: 50%
    }

    .devui-col__md--offset-13 {
        margin-left: 54.1666666667%
    }

    .devui-col__md--pull-13 {
        right: 54.1666666667%
    }

    .devui-col__md--push-13 {
        left: 54.1666666667%
    }

    .devui-col__md--span-13 {
        display: block;
        flex: 0 0 54.1666666667%;
        width: 54.1666666667%
    }

    .devui-col__md--offset-14 {
        margin-left: 58.3333333333%
    }

    .devui-col__md--pull-14 {
        right: 58.3333333333%
    }

    .devui-col__md--push-14 {
        left: 58.3333333333%
    }

    .devui-col__md--span-14 {
        display: block;
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%
    }

    .devui-col__md--offset-15 {
        margin-left: 62.5%
    }

    .devui-col__md--pull-15 {
        right: 62.5%
    }

    .devui-col__md--push-15 {
        left: 62.5%
    }

    .devui-col__md--span-15 {
        display: block;
        flex: 0 0 62.5%;
        width: 62.5%
    }

    .devui-col__md--offset-16 {
        margin-left: 66.6666666667%
    }

    .devui-col__md--pull-16 {
        right: 66.6666666667%
    }

    .devui-col__md--push-16 {
        left: 66.6666666667%
    }

    .devui-col__md--span-16 {
        display: block;
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%
    }

    .devui-col__md--offset-17 {
        margin-left: 70.8333333333%
    }

    .devui-col__md--pull-17 {
        right: 70.8333333333%
    }

    .devui-col__md--push-17 {
        left: 70.8333333333%
    }

    .devui-col__md--span-17 {
        display: block;
        flex: 0 0 70.8333333333%;
        width: 70.8333333333%
    }

    .devui-col__md--offset-18 {
        margin-left: 75%
    }

    .devui-col__md--pull-18 {
        right: 75%
    }

    .devui-col__md--push-18 {
        left: 75%
    }

    .devui-col__md--span-18 {
        display: block;
        flex: 0 0 75%;
        width: 75%
    }

    .devui-col__md--offset-19 {
        margin-left: 79.1666666667%
    }

    .devui-col__md--pull-19 {
        right: 79.1666666667%
    }

    .devui-col__md--push-19 {
        left: 79.1666666667%
    }

    .devui-col__md--span-19 {
        display: block;
        flex: 0 0 79.1666666667%;
        width: 79.1666666667%
    }

    .devui-col__md--offset-20 {
        margin-left: 83.3333333333%
    }

    .devui-col__md--pull-20 {
        right: 83.3333333333%
    }

    .devui-col__md--push-20 {
        left: 83.3333333333%
    }

    .devui-col__md--span-20 {
        display: block;
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%
    }

    .devui-col__md--offset-21 {
        margin-left: 87.5%
    }

    .devui-col__md--pull-21 {
        right: 87.5%
    }

    .devui-col__md--push-21 {
        left: 87.5%
    }

    .devui-col__md--span-21 {
        display: block;
        flex: 0 0 87.5%;
        width: 87.5%
    }

    .devui-col__md--offset-22 {
        margin-left: 91.6666666667%
    }

    .devui-col__md--pull-22 {
        right: 91.6666666667%
    }

    .devui-col__md--push-22 {
        left: 91.6666666667%
    }

    .devui-col__md--span-22 {
        display: block;
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%
    }

    .devui-col__md--offset-23 {
        margin-left: 95.8333333333%
    }

    .devui-col__md--pull-23 {
        right: 95.8333333333%
    }

    .devui-col__md--push-23 {
        left: 95.8333333333%
    }

    .devui-col__md--span-23 {
        display: block;
        flex: 0 0 95.8333333333%;
        width: 95.8333333333%
    }

    .devui-col__md--offset-24 {
        margin-left: 100%
    }

    .devui-col__md--pull-24 {
        right: 100%
    }

    .devui-col__md--push-24 {
        left: 100%
    }

    .devui-col__md--span-24 {
        display: block;
        flex: 0 0 100%;
        width: 100%
    }
}

@media screen and (min-width: 992px) {
    .devui-col__lg--span-0 {
        display:none
    }

    .devui-col__lg--offset-1 {
        margin-left: 4.1666666667%
    }

    .devui-col__lg--pull-1 {
        right: 4.1666666667%
    }

    .devui-col__lg--push-1 {
        left: 4.1666666667%
    }

    .devui-col__lg--span-1 {
        display: block;
        flex: 0 0 4.1666666667%;
        width: 4.1666666667%
    }

    .devui-col__lg--offset-2 {
        margin-left: 8.3333333333%
    }

    .devui-col__lg--pull-2 {
        right: 8.3333333333%
    }

    .devui-col__lg--push-2 {
        left: 8.3333333333%
    }

    .devui-col__lg--span-2 {
        display: block;
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%
    }

    .devui-col__lg--offset-3 {
        margin-left: 12.5%
    }

    .devui-col__lg--pull-3 {
        right: 12.5%
    }

    .devui-col__lg--push-3 {
        left: 12.5%
    }

    .devui-col__lg--span-3 {
        display: block;
        flex: 0 0 12.5%;
        width: 12.5%
    }

    .devui-col__lg--offset-4 {
        margin-left: 16.6666666667%
    }

    .devui-col__lg--pull-4 {
        right: 16.6666666667%
    }

    .devui-col__lg--push-4 {
        left: 16.6666666667%
    }

    .devui-col__lg--span-4 {
        display: block;
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%
    }

    .devui-col__lg--offset-5 {
        margin-left: 20.8333333333%
    }

    .devui-col__lg--pull-5 {
        right: 20.8333333333%
    }

    .devui-col__lg--push-5 {
        left: 20.8333333333%
    }

    .devui-col__lg--span-5 {
        display: block;
        flex: 0 0 20.8333333333%;
        width: 20.8333333333%
    }

    .devui-col__lg--offset-6 {
        margin-left: 25%
    }

    .devui-col__lg--pull-6 {
        right: 25%
    }

    .devui-col__lg--push-6 {
        left: 25%
    }

    .devui-col__lg--span-6 {
        display: block;
        flex: 0 0 25%;
        width: 25%
    }

    .devui-col__lg--offset-7 {
        margin-left: 29.1666666667%
    }

    .devui-col__lg--pull-7 {
        right: 29.1666666667%
    }

    .devui-col__lg--push-7 {
        left: 29.1666666667%
    }

    .devui-col__lg--span-7 {
        display: block;
        flex: 0 0 29.1666666667%;
        width: 29.1666666667%
    }

    .devui-col__lg--offset-8 {
        margin-left: 33.3333333333%
    }

    .devui-col__lg--pull-8 {
        right: 33.3333333333%
    }

    .devui-col__lg--push-8 {
        left: 33.3333333333%
    }

    .devui-col__lg--span-8 {
        display: block;
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%
    }

    .devui-col__lg--offset-9 {
        margin-left: 37.5%
    }

    .devui-col__lg--pull-9 {
        right: 37.5%
    }

    .devui-col__lg--push-9 {
        left: 37.5%
    }

    .devui-col__lg--span-9 {
        display: block;
        flex: 0 0 37.5%;
        width: 37.5%
    }

    .devui-col__lg--offset-10 {
        margin-left: 41.6666666667%
    }

    .devui-col__lg--pull-10 {
        right: 41.6666666667%
    }

    .devui-col__lg--push-10 {
        left: 41.6666666667%
    }

    .devui-col__lg--span-10 {
        display: block;
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%
    }

    .devui-col__lg--offset-11 {
        margin-left: 45.8333333333%
    }

    .devui-col__lg--pull-11 {
        right: 45.8333333333%
    }

    .devui-col__lg--push-11 {
        left: 45.8333333333%
    }

    .devui-col__lg--span-11 {
        display: block;
        flex: 0 0 45.8333333333%;
        width: 45.8333333333%
    }

    .devui-col__lg--offset-12 {
        margin-left: 50%
    }

    .devui-col__lg--pull-12 {
        right: 50%
    }

    .devui-col__lg--push-12 {
        left: 50%
    }

    .devui-col__lg--span-12 {
        display: block;
        flex: 0 0 50%;
        width: 50%
    }

    .devui-col__lg--offset-13 {
        margin-left: 54.1666666667%
    }

    .devui-col__lg--pull-13 {
        right: 54.1666666667%
    }

    .devui-col__lg--push-13 {
        left: 54.1666666667%
    }

    .devui-col__lg--span-13 {
        display: block;
        flex: 0 0 54.1666666667%;
        width: 54.1666666667%
    }

    .devui-col__lg--offset-14 {
        margin-left: 58.3333333333%
    }

    .devui-col__lg--pull-14 {
        right: 58.3333333333%
    }

    .devui-col__lg--push-14 {
        left: 58.3333333333%
    }

    .devui-col__lg--span-14 {
        display: block;
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%
    }

    .devui-col__lg--offset-15 {
        margin-left: 62.5%
    }

    .devui-col__lg--pull-15 {
        right: 62.5%
    }

    .devui-col__lg--push-15 {
        left: 62.5%
    }

    .devui-col__lg--span-15 {
        display: block;
        flex: 0 0 62.5%;
        width: 62.5%
    }

    .devui-col__lg--offset-16 {
        margin-left: 66.6666666667%
    }

    .devui-col__lg--pull-16 {
        right: 66.6666666667%
    }

    .devui-col__lg--push-16 {
        left: 66.6666666667%
    }

    .devui-col__lg--span-16 {
        display: block;
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%
    }

    .devui-col__lg--offset-17 {
        margin-left: 70.8333333333%
    }

    .devui-col__lg--pull-17 {
        right: 70.8333333333%
    }

    .devui-col__lg--push-17 {
        left: 70.8333333333%
    }

    .devui-col__lg--span-17 {
        display: block;
        flex: 0 0 70.8333333333%;
        width: 70.8333333333%
    }

    .devui-col__lg--offset-18 {
        margin-left: 75%
    }

    .devui-col__lg--pull-18 {
        right: 75%
    }

    .devui-col__lg--push-18 {
        left: 75%
    }

    .devui-col__lg--span-18 {
        display: block;
        flex: 0 0 75%;
        width: 75%
    }

    .devui-col__lg--offset-19 {
        margin-left: 79.1666666667%
    }

    .devui-col__lg--pull-19 {
        right: 79.1666666667%
    }

    .devui-col__lg--push-19 {
        left: 79.1666666667%
    }

    .devui-col__lg--span-19 {
        display: block;
        flex: 0 0 79.1666666667%;
        width: 79.1666666667%
    }

    .devui-col__lg--offset-20 {
        margin-left: 83.3333333333%
    }

    .devui-col__lg--pull-20 {
        right: 83.3333333333%
    }

    .devui-col__lg--push-20 {
        left: 83.3333333333%
    }

    .devui-col__lg--span-20 {
        display: block;
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%
    }

    .devui-col__lg--offset-21 {
        margin-left: 87.5%
    }

    .devui-col__lg--pull-21 {
        right: 87.5%
    }

    .devui-col__lg--push-21 {
        left: 87.5%
    }

    .devui-col__lg--span-21 {
        display: block;
        flex: 0 0 87.5%;
        width: 87.5%
    }

    .devui-col__lg--offset-22 {
        margin-left: 91.6666666667%
    }

    .devui-col__lg--pull-22 {
        right: 91.6666666667%
    }

    .devui-col__lg--push-22 {
        left: 91.6666666667%
    }

    .devui-col__lg--span-22 {
        display: block;
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%
    }

    .devui-col__lg--offset-23 {
        margin-left: 95.8333333333%
    }

    .devui-col__lg--pull-23 {
        right: 95.8333333333%
    }

    .devui-col__lg--push-23 {
        left: 95.8333333333%
    }

    .devui-col__lg--span-23 {
        display: block;
        flex: 0 0 95.8333333333%;
        width: 95.8333333333%
    }

    .devui-col__lg--offset-24 {
        margin-left: 100%
    }

    .devui-col__lg--pull-24 {
        right: 100%
    }

    .devui-col__lg--push-24 {
        left: 100%
    }

    .devui-col__lg--span-24 {
        display: block;
        flex: 0 0 100%;
        width: 100%
    }
}

@media screen and (min-width: 1200px) {
    .devui-col__xl--span-0 {
        display:none
    }

    .devui-col__xl--offset-1 {
        margin-left: 4.1666666667%
    }

    .devui-col__xl--pull-1 {
        right: 4.1666666667%
    }

    .devui-col__xl--push-1 {
        left: 4.1666666667%
    }

    .devui-col__xl--span-1 {
        display: block;
        flex: 0 0 4.1666666667%;
        width: 4.1666666667%
    }

    .devui-col__xl--offset-2 {
        margin-left: 8.3333333333%
    }

    .devui-col__xl--pull-2 {
        right: 8.3333333333%
    }

    .devui-col__xl--push-2 {
        left: 8.3333333333%
    }

    .devui-col__xl--span-2 {
        display: block;
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%
    }

    .devui-col__xl--offset-3 {
        margin-left: 12.5%
    }

    .devui-col__xl--pull-3 {
        right: 12.5%
    }

    .devui-col__xl--push-3 {
        left: 12.5%
    }

    .devui-col__xl--span-3 {
        display: block;
        flex: 0 0 12.5%;
        width: 12.5%
    }

    .devui-col__xl--offset-4 {
        margin-left: 16.6666666667%
    }

    .devui-col__xl--pull-4 {
        right: 16.6666666667%
    }

    .devui-col__xl--push-4 {
        left: 16.6666666667%
    }

    .devui-col__xl--span-4 {
        display: block;
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%
    }

    .devui-col__xl--offset-5 {
        margin-left: 20.8333333333%
    }

    .devui-col__xl--pull-5 {
        right: 20.8333333333%
    }

    .devui-col__xl--push-5 {
        left: 20.8333333333%
    }

    .devui-col__xl--span-5 {
        display: block;
        flex: 0 0 20.8333333333%;
        width: 20.8333333333%
    }

    .devui-col__xl--offset-6 {
        margin-left: 25%
    }

    .devui-col__xl--pull-6 {
        right: 25%
    }

    .devui-col__xl--push-6 {
        left: 25%
    }

    .devui-col__xl--span-6 {
        display: block;
        flex: 0 0 25%;
        width: 25%
    }

    .devui-col__xl--offset-7 {
        margin-left: 29.1666666667%
    }

    .devui-col__xl--pull-7 {
        right: 29.1666666667%
    }

    .devui-col__xl--push-7 {
        left: 29.1666666667%
    }

    .devui-col__xl--span-7 {
        display: block;
        flex: 0 0 29.1666666667%;
        width: 29.1666666667%
    }

    .devui-col__xl--offset-8 {
        margin-left: 33.3333333333%
    }

    .devui-col__xl--pull-8 {
        right: 33.3333333333%
    }

    .devui-col__xl--push-8 {
        left: 33.3333333333%
    }

    .devui-col__xl--span-8 {
        display: block;
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%
    }

    .devui-col__xl--offset-9 {
        margin-left: 37.5%
    }

    .devui-col__xl--pull-9 {
        right: 37.5%
    }

    .devui-col__xl--push-9 {
        left: 37.5%
    }

    .devui-col__xl--span-9 {
        display: block;
        flex: 0 0 37.5%;
        width: 37.5%
    }

    .devui-col__xl--offset-10 {
        margin-left: 41.6666666667%
    }

    .devui-col__xl--pull-10 {
        right: 41.6666666667%
    }

    .devui-col__xl--push-10 {
        left: 41.6666666667%
    }

    .devui-col__xl--span-10 {
        display: block;
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%
    }

    .devui-col__xl--offset-11 {
        margin-left: 45.8333333333%
    }

    .devui-col__xl--pull-11 {
        right: 45.8333333333%
    }

    .devui-col__xl--push-11 {
        left: 45.8333333333%
    }

    .devui-col__xl--span-11 {
        display: block;
        flex: 0 0 45.8333333333%;
        width: 45.8333333333%
    }

    .devui-col__xl--offset-12 {
        margin-left: 50%
    }

    .devui-col__xl--pull-12 {
        right: 50%
    }

    .devui-col__xl--push-12 {
        left: 50%
    }

    .devui-col__xl--span-12 {
        display: block;
        flex: 0 0 50%;
        width: 50%
    }

    .devui-col__xl--offset-13 {
        margin-left: 54.1666666667%
    }

    .devui-col__xl--pull-13 {
        right: 54.1666666667%
    }

    .devui-col__xl--push-13 {
        left: 54.1666666667%
    }

    .devui-col__xl--span-13 {
        display: block;
        flex: 0 0 54.1666666667%;
        width: 54.1666666667%
    }

    .devui-col__xl--offset-14 {
        margin-left: 58.3333333333%
    }

    .devui-col__xl--pull-14 {
        right: 58.3333333333%
    }

    .devui-col__xl--push-14 {
        left: 58.3333333333%
    }

    .devui-col__xl--span-14 {
        display: block;
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%
    }

    .devui-col__xl--offset-15 {
        margin-left: 62.5%
    }

    .devui-col__xl--pull-15 {
        right: 62.5%
    }

    .devui-col__xl--push-15 {
        left: 62.5%
    }

    .devui-col__xl--span-15 {
        display: block;
        flex: 0 0 62.5%;
        width: 62.5%
    }

    .devui-col__xl--offset-16 {
        margin-left: 66.6666666667%
    }

    .devui-col__xl--pull-16 {
        right: 66.6666666667%
    }

    .devui-col__xl--push-16 {
        left: 66.6666666667%
    }

    .devui-col__xl--span-16 {
        display: block;
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%
    }

    .devui-col__xl--offset-17 {
        margin-left: 70.8333333333%
    }

    .devui-col__xl--pull-17 {
        right: 70.8333333333%
    }

    .devui-col__xl--push-17 {
        left: 70.8333333333%
    }

    .devui-col__xl--span-17 {
        display: block;
        flex: 0 0 70.8333333333%;
        width: 70.8333333333%
    }

    .devui-col__xl--offset-18 {
        margin-left: 75%
    }

    .devui-col__xl--pull-18 {
        right: 75%
    }

    .devui-col__xl--push-18 {
        left: 75%
    }

    .devui-col__xl--span-18 {
        display: block;
        flex: 0 0 75%;
        width: 75%
    }

    .devui-col__xl--offset-19 {
        margin-left: 79.1666666667%
    }

    .devui-col__xl--pull-19 {
        right: 79.1666666667%
    }

    .devui-col__xl--push-19 {
        left: 79.1666666667%
    }

    .devui-col__xl--span-19 {
        display: block;
        flex: 0 0 79.1666666667%;
        width: 79.1666666667%
    }

    .devui-col__xl--offset-20 {
        margin-left: 83.3333333333%
    }

    .devui-col__xl--pull-20 {
        right: 83.3333333333%
    }

    .devui-col__xl--push-20 {
        left: 83.3333333333%
    }

    .devui-col__xl--span-20 {
        display: block;
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%
    }

    .devui-col__xl--offset-21 {
        margin-left: 87.5%
    }

    .devui-col__xl--pull-21 {
        right: 87.5%
    }

    .devui-col__xl--push-21 {
        left: 87.5%
    }

    .devui-col__xl--span-21 {
        display: block;
        flex: 0 0 87.5%;
        width: 87.5%
    }

    .devui-col__xl--offset-22 {
        margin-left: 91.6666666667%
    }

    .devui-col__xl--pull-22 {
        right: 91.6666666667%
    }

    .devui-col__xl--push-22 {
        left: 91.6666666667%
    }

    .devui-col__xl--span-22 {
        display: block;
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%
    }

    .devui-col__xl--offset-23 {
        margin-left: 95.8333333333%
    }

    .devui-col__xl--pull-23 {
        right: 95.8333333333%
    }

    .devui-col__xl--push-23 {
        left: 95.8333333333%
    }

    .devui-col__xl--span-23 {
        display: block;
        flex: 0 0 95.8333333333%;
        width: 95.8333333333%
    }

    .devui-col__xl--offset-24 {
        margin-left: 100%
    }

    .devui-col__xl--pull-24 {
        right: 100%
    }

    .devui-col__xl--push-24 {
        left: 100%
    }

    .devui-col__xl--span-24 {
        display: block;
        flex: 0 0 100%;
        width: 100%
    }
}

@media screen and (min-width: 1600px) {
    .devui-col__xxl--span-0 {
        display:none
    }

    .devui-col__xxl--offset-1 {
        margin-left: 4.1666666667%
    }

    .devui-col__xxl--pull-1 {
        right: 4.1666666667%
    }

    .devui-col__xxl--push-1 {
        left: 4.1666666667%
    }

    .devui-col__xxl--span-1 {
        display: block;
        flex: 0 0 4.1666666667%;
        width: 4.1666666667%
    }

    .devui-col__xxl--offset-2 {
        margin-left: 8.3333333333%
    }

    .devui-col__xxl--pull-2 {
        right: 8.3333333333%
    }

    .devui-col__xxl--push-2 {
        left: 8.3333333333%
    }

    .devui-col__xxl--span-2 {
        display: block;
        flex: 0 0 8.3333333333%;
        width: 8.3333333333%
    }

    .devui-col__xxl--offset-3 {
        margin-left: 12.5%
    }

    .devui-col__xxl--pull-3 {
        right: 12.5%
    }

    .devui-col__xxl--push-3 {
        left: 12.5%
    }

    .devui-col__xxl--span-3 {
        display: block;
        flex: 0 0 12.5%;
        width: 12.5%
    }

    .devui-col__xxl--offset-4 {
        margin-left: 16.6666666667%
    }

    .devui-col__xxl--pull-4 {
        right: 16.6666666667%
    }

    .devui-col__xxl--push-4 {
        left: 16.6666666667%
    }

    .devui-col__xxl--span-4 {
        display: block;
        flex: 0 0 16.6666666667%;
        width: 16.6666666667%
    }

    .devui-col__xxl--offset-5 {
        margin-left: 20.8333333333%
    }

    .devui-col__xxl--pull-5 {
        right: 20.8333333333%
    }

    .devui-col__xxl--push-5 {
        left: 20.8333333333%
    }

    .devui-col__xxl--span-5 {
        display: block;
        flex: 0 0 20.8333333333%;
        width: 20.8333333333%
    }

    .devui-col__xxl--offset-6 {
        margin-left: 25%
    }

    .devui-col__xxl--pull-6 {
        right: 25%
    }

    .devui-col__xxl--push-6 {
        left: 25%
    }

    .devui-col__xxl--span-6 {
        display: block;
        flex: 0 0 25%;
        width: 25%
    }

    .devui-col__xxl--offset-7 {
        margin-left: 29.1666666667%
    }

    .devui-col__xxl--pull-7 {
        right: 29.1666666667%
    }

    .devui-col__xxl--push-7 {
        left: 29.1666666667%
    }

    .devui-col__xxl--span-7 {
        display: block;
        flex: 0 0 29.1666666667%;
        width: 29.1666666667%
    }

    .devui-col__xxl--offset-8 {
        margin-left: 33.3333333333%
    }

    .devui-col__xxl--pull-8 {
        right: 33.3333333333%
    }

    .devui-col__xxl--push-8 {
        left: 33.3333333333%
    }

    .devui-col__xxl--span-8 {
        display: block;
        flex: 0 0 33.3333333333%;
        width: 33.3333333333%
    }

    .devui-col__xxl--offset-9 {
        margin-left: 37.5%
    }

    .devui-col__xxl--pull-9 {
        right: 37.5%
    }

    .devui-col__xxl--push-9 {
        left: 37.5%
    }

    .devui-col__xxl--span-9 {
        display: block;
        flex: 0 0 37.5%;
        width: 37.5%
    }

    .devui-col__xxl--offset-10 {
        margin-left: 41.6666666667%
    }

    .devui-col__xxl--pull-10 {
        right: 41.6666666667%
    }

    .devui-col__xxl--push-10 {
        left: 41.6666666667%
    }

    .devui-col__xxl--span-10 {
        display: block;
        flex: 0 0 41.6666666667%;
        width: 41.6666666667%
    }

    .devui-col__xxl--offset-11 {
        margin-left: 45.8333333333%
    }

    .devui-col__xxl--pull-11 {
        right: 45.8333333333%
    }

    .devui-col__xxl--push-11 {
        left: 45.8333333333%
    }

    .devui-col__xxl--span-11 {
        display: block;
        flex: 0 0 45.8333333333%;
        width: 45.8333333333%
    }

    .devui-col__xxl--offset-12 {
        margin-left: 50%
    }

    .devui-col__xxl--pull-12 {
        right: 50%
    }

    .devui-col__xxl--push-12 {
        left: 50%
    }

    .devui-col__xxl--span-12 {
        display: block;
        flex: 0 0 50%;
        width: 50%
    }

    .devui-col__xxl--offset-13 {
        margin-left: 54.1666666667%
    }

    .devui-col__xxl--pull-13 {
        right: 54.1666666667%
    }

    .devui-col__xxl--push-13 {
        left: 54.1666666667%
    }

    .devui-col__xxl--span-13 {
        display: block;
        flex: 0 0 54.1666666667%;
        width: 54.1666666667%
    }

    .devui-col__xxl--offset-14 {
        margin-left: 58.3333333333%
    }

    .devui-col__xxl--pull-14 {
        right: 58.3333333333%
    }

    .devui-col__xxl--push-14 {
        left: 58.3333333333%
    }

    .devui-col__xxl--span-14 {
        display: block;
        flex: 0 0 58.3333333333%;
        width: 58.3333333333%
    }

    .devui-col__xxl--offset-15 {
        margin-left: 62.5%
    }

    .devui-col__xxl--pull-15 {
        right: 62.5%
    }

    .devui-col__xxl--push-15 {
        left: 62.5%
    }

    .devui-col__xxl--span-15 {
        display: block;
        flex: 0 0 62.5%;
        width: 62.5%
    }

    .devui-col__xxl--offset-16 {
        margin-left: 66.6666666667%
    }

    .devui-col__xxl--pull-16 {
        right: 66.6666666667%
    }

    .devui-col__xxl--push-16 {
        left: 66.6666666667%
    }

    .devui-col__xxl--span-16 {
        display: block;
        flex: 0 0 66.6666666667%;
        width: 66.6666666667%
    }

    .devui-col__xxl--offset-17 {
        margin-left: 70.8333333333%
    }

    .devui-col__xxl--pull-17 {
        right: 70.8333333333%
    }

    .devui-col__xxl--push-17 {
        left: 70.8333333333%
    }

    .devui-col__xxl--span-17 {
        display: block;
        flex: 0 0 70.8333333333%;
        width: 70.8333333333%
    }

    .devui-col__xxl--offset-18 {
        margin-left: 75%
    }

    .devui-col__xxl--pull-18 {
        right: 75%
    }

    .devui-col__xxl--push-18 {
        left: 75%
    }

    .devui-col__xxl--span-18 {
        display: block;
        flex: 0 0 75%;
        width: 75%
    }

    .devui-col__xxl--offset-19 {
        margin-left: 79.1666666667%
    }

    .devui-col__xxl--pull-19 {
        right: 79.1666666667%
    }

    .devui-col__xxl--push-19 {
        left: 79.1666666667%
    }

    .devui-col__xxl--span-19 {
        display: block;
        flex: 0 0 79.1666666667%;
        width: 79.1666666667%
    }

    .devui-col__xxl--offset-20 {
        margin-left: 83.3333333333%
    }

    .devui-col__xxl--pull-20 {
        right: 83.3333333333%
    }

    .devui-col__xxl--push-20 {
        left: 83.3333333333%
    }

    .devui-col__xxl--span-20 {
        display: block;
        flex: 0 0 83.3333333333%;
        width: 83.3333333333%
    }

    .devui-col__xxl--offset-21 {
        margin-left: 87.5%
    }

    .devui-col__xxl--pull-21 {
        right: 87.5%
    }

    .devui-col__xxl--push-21 {
        left: 87.5%
    }

    .devui-col__xxl--span-21 {
        display: block;
        flex: 0 0 87.5%;
        width: 87.5%
    }

    .devui-col__xxl--offset-22 {
        margin-left: 91.6666666667%
    }

    .devui-col__xxl--pull-22 {
        right: 91.6666666667%
    }

    .devui-col__xxl--push-22 {
        left: 91.6666666667%
    }

    .devui-col__xxl--span-22 {
        display: block;
        flex: 0 0 91.6666666667%;
        width: 91.6666666667%
    }

    .devui-col__xxl--offset-23 {
        margin-left: 95.8333333333%
    }

    .devui-col__xxl--pull-23 {
        right: 95.8333333333%
    }

    .devui-col__xxl--push-23 {
        left: 95.8333333333%
    }

    .devui-col__xxl--span-23 {
        display: block;
        flex: 0 0 95.8333333333%;
        width: 95.8333333333%
    }

    .devui-col__xxl--offset-24 {
        margin-left: 100%
    }

    .devui-col__xxl--pull-24 {
        right: 100%
    }

    .devui-col__xxl--push-24 {
        left: 100%
    }

    .devui-col__xxl--span-24 {
        display: block;
        flex: 0 0 100%;
        width: 100%
    }
}

.devui-image-preview {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--devui-z-index-full-page-overlay, 1080);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path {
    fill: var(--devui-icon-text, #71757f)
}

.devui-image-preview__main-image {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    margin-top: -20px;
    cursor: grab
}

.devui-image-preview__close-btn {
    position: fixed;
    z-index: var(--devui-z-index-full-page-overlay, 1080);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 15px;
    right: 20px
}

.devui-image-preview__close-btn:hover {
    background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__close-btn svg {
    width: 38px;
    height: 18px
}

.devui-image-preview__arrow-left {
    position: fixed;
    z-index: var(--devui-z-index-full-page-overlay, 1080);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
}

.devui-image-preview__arrow-left:hover {
    background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__arrow-left svg {
    width: 38px;
    height: 18px
}

.devui-image-preview__arrow-right {
    position: fixed;
    z-index: var(--devui-z-index-full-page-overlay, 1080);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    right: 20px;
    transform: translateY(-50%)
}

.devui-image-preview__arrow-right:hover {
    background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__arrow-right svg {
    width: 38px;
    height: 18px
}

.devui-image-preview__toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
    box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-image-preview__toolbar button {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: var(--devui-text, #252b3a);
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: 0;
    padding: 0
}

.devui-image-preview__toolbar .devui-image-preview__index {
    display: inline-flex;
    width: 100px;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.devui-image-preview__toolbar>:not(:first-child) {
    margin-left: 20px
}

.devui-image-preview__bg {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--devui-z-index-full-page-overlay, 1080) - 1);
    background: var(--devui-shadow, rgba(37, 43, 58, .24));
    border-radius: var(--devui-border-radius, 2px);
    box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24))
}

.d-input-icon-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative
}

.d-input-icon-container label {
    flex: 1;
    background-color: #ccc
}

.d-input-icon-container label input {
    padding-right: 29px
}

.d-input-icon-container span {
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box
}

.devui-layout {
    display: flex;
    flex-direction: column;
    flex: auto
}

.devui-layout__aside {
    flex-direction: row
}

.devui-layout__content {
    flex: auto;
    min-height: 0
}

.devui-layout__header {
    min-height: 40px;
    flex: auto
}

.devui-layout__footer {
    text-align: center;
    line-height: 1.5
}

.devui-list {
    padding-bottom: 4px;
    border-radius: var(--devui-border-radius, 2px);
    box-sizing: border-box;
    background-clip: padding-box;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    outline: none
}

.devui-list-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
    color: var(--devui-text, #252b3a);
    border-radius: var(--devui-border-radius, 2px);
    box-sizing: border-box;
    cursor: pointer;
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-list-item:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-list-item:active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    color: var(--devui-text, #252b3a);
    vertical-align: middle;
    outline: none;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow .3s var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-textarea.devui-textarea--glow-style:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-textarea--focus:not(.devui-textarea--error) {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-textarea--focus.devui-textarea--glow-style:not(.devui-textarea--error) {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-textarea--disabled {
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-textarea--disabled:hover {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-textarea--disabled .devui-textarea__inner {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-textarea--error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-textarea__show-count {
    text-align: right;
    color: inherit;
    white-space: nowrap;
    pointer-events: none;
    font-size: var(--devui-font-size, 12px)
}

.devui-textarea--feedback {
    padding-right: 28px
}

.devui-mention {
    position: relative
}

.devui-mention__suggestions {
    position: absolute;
    left: 24px;
    z-index: var(--devui-z-index-framework, 1000);
    background: #fff;
    min-width: 120px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1))
}

.devui-mention__suggestions-item {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    cursor: pointer
}

.devui-mention__suggestions-item:hover {
    background: #eee
}

.devui-mention__suggestions-item-active {
    background: #f2f5fa
}

.devui-mention__suggestions-loading {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
    padding: 6px 10px;
    cursor: pointer
}

.devui-menu-vertical a,.devui-menu-vertical a:hover,.devui-menu-vertical a:active,.devui-menu-vertical a:visited,.devui-menu-horizontal a,.devui-menu-horizontal a:hover,.devui-menu-horizontal a:active,.devui-menu-horizontal a:visited {
    text-decoration: none
}

.devui-menu-vertical ul,.devui-menu-vertical li,.devui-menu-horizontal ul,.devui-menu-horizontal li {
    list-style: none;
    white-space: nowrap
}

.devui-menu-horizontal {
    display: flex;
    box-sizing: border-box;
    line-height: var(--devui-line-height-base, 1.5);
    background: var(--devui-global-bg-normal);
    padding: 14px 20px
}

.devui-menu-horizontal .devui-menu-item {
    display: flex;
    position: relative;
    box-sizing: content-box;
    padding: 0 20px!important;
    line-height: 24px;
    cursor: pointer
}

.devui-menu-horizontal .devui-menu-item:after {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    width: auto;
    height: 2px
}

.devui-menu-horizontal :after {
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    background: transparent
}

.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content,.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content {
    color: var(--devui-menu-item-hover)
}

.devui-menu-horizontal .devui-menu-item-select:after,.devui-menu-horizontal .devui-menu-active-parent:after {
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    width: auto;
    height: 2px;
    content: "";
    opacity: 1;
    background: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-menu-item span,.devui-menu-horizontal .devui-menu-item a {
    color: var(--devui-text, #252b3a)
}

.devui-menu-horizontal .devui-menu-item:hover span,.devui-menu-horizontal .devui-menu-item:hover a {
    color: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-menu-item:hover:after {
    background: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-submenu {
    margin: 0;
    padding: 0;
    position: relative
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title {
    padding: 0 20px
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title span {
    margin: 0
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right {
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-horizontal .devui-submenu:after {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    width: auto;
    height: 2px
}

.devui-menu-horizontal .devui-submenu:hover {
    cursor: pointer
}

.devui-menu-horizontal .devui-submenu:hover:after {
    background: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up {
    transform: rotate(180deg)
}

.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right {
    transform: rotate(180deg)
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper {
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),left 0 linear;
    background: var(--devui-global-bg-normal);
    z-index: var(--devui-z-index-modal, 1050)
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show {
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    padding: 10px 0!important;
    border-radius: 8px;
    position: absolute
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item {
    margin-top: 5px
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu {
    margin: 5px 0;
    padding: 0 20px!important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title {
    padding: 0!important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu {
    padding: 0 20px!important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden {
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    visibility: hidden;
    position: absolute;
    padding: 0!important;
    max-height: 0;
    overflow: hidden;
    opacity: 0
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item {
    margin-top: 5px
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu {
    margin: 5px 0;
    padding: 0 20px!important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title {
    padding: 0!important
}

.devui-menu-horizontal .devui-menu-item-disabled span,.devui-menu-horizontal .devui-menu-item-disabled a,.devui-menu-horizontal .devui-submenu-disabled span,.devui-menu-horizontal .devui-submenu-disabled a {
    color: var(--devui-menu-disabled)!important;
    cursor: not-allowed
}

.devui-menu-horizontal .devui-menu-item-disabled:after,.devui-menu-horizontal .devui-submenu-disabled:after {
    content: unset!important
}

.devui-menu-horizontal .devui-menu-item-disabled+.devui-menu-item-horizontal-wrapper,.devui-menu-horizontal .devui-submenu-disabled+.devui-menu-item-horizontal-wrapper {
    display: none
}

.devui-submenu-menu-item-vertical-wrapper {
    overflow: hidden
}

.devui-submenu-menu-item {
    color: var(--devui-menu-item)
}

.devui-menu-vertical {
    padding: 0;
    transition: width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    border-right: var(--devui-line, #d7d8da) 1px solid
}

.devui-menu-vertical :after {
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    background: transparent
}

.devui-menu-vertical .layer_1 {
    margin: 0!important
}

.devui-menu-vertical .layer_2>div.devui-submenu-title {
    margin: 0!important;
    background: var(--devui-block, #ffffff)
}

.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon {
    margin: auto
}

.devui-menu-vertical.devui-menu-collapsed ul li {
    display: none!important
}

.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon {
    margin: auto
}

.devui-menu-vertical .devui-menu-item-vertical-wrapper {
    padding-left: 0!important;
    margin: 4px 0!important
}

.devui-menu-vertical .devui-menu-item {
    width: 100%;
    height: 40px;
    flex-grow: 1;
    line-height: 40px;
    cursor: pointer;
    color: var(--devui-menu-item);
    background: var(--devui-block, #ffffff);
    display: flex;
    transition: background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical .devui-menu-item:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-menu-vertical .devui-menu-item span:nth-child(2) {
    text-align: left
}

.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper) {
    display: flex;
    flex: auto
}

.devui-menu-vertical .devui-menu-item:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    content: "";
    opacity: 1;
    background: var(--devui-primary-hover, #5e7ce0)
}

.devui-menu-vertical ul.devui-submenu {
    margin: 0;
    padding: 0
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item {
    display: flex
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item>span {
    flex: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    color: var(--devui-menu-item)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title {
    display: flex;
    cursor: pointer;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 18px;
    align-items: center;
    color: var(--devui-menu-item);
    transition: background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:hover {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:nth-child(1) {
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content {
    font-size: var(--devui-font-size-lg, 14px);
    flex: auto;
    color: var(--devui-menu-item)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon {
    text-align: center
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up {
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened {
    transform: rotate(180deg)
}

.devui-menu-vertical ul.devui-submenu .devui-submenu-title:hover span {
    color: var(--devui-menu-item-hover)!important
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover span {
    color: var(--devui-menu-item-hover)
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item-select * {
    color: var(--devui-menu-item-hover)!important
}

.devui-menu-vertical .devui-menu-item-select {
    background: var(--devui-primary-bg, #f2f5fc)!important;
    position: relative
}

.devui-menu-vertical .devui-menu-item-select span,.devui-menu-vertical .devui-menu-item-select a {
    color: var(--devui-menu-item-hover)
}

.devui-menu-vertical .devui-menu-item-select:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 4px;
    content: "";
    opacity: 1;
    background: var(--devui-brand, #5e7ce0);
    transform: scaleX(1)
}

.devui-menu-vertical .devui-menu-item:hover {
    color: var(--devui-menu-item-hover)
}

.devui-menu-vertical li.devui-menu-item,.devui-menu-vertical div.devui-submenu-title {
    white-space: nowrap;
    overflow: hidden
}

.devui-menu-vertical li.devui-menu-item span:nth-child(2),.devui-menu-vertical div.devui-submenu-title span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-menu-vertical li.devui-menu-item span:nth-child(2) span,.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span {
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-menu-vertical .devui-menu-item-isCollapsed {
    width: fit-content
}

.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon {
    margin: auto
}

.devui-menu-vertical ul li~ul>div {
    margin-top: 0!important
}

.devui-menu-vertical .devui-menu-item-disabled *,.devui-menu-vertical .devui-submenu-disabled * {
    color: var(--devui-menu-disabled)!important;
    cursor: not-allowed!important;
    background: var(--devui-block, #ffffff)!important
}

.devui-menu-vertical .devui-menu-item-disabled:after,.devui-menu-vertical .devui-submenu-disabled:after {
    content: unset
}

.devui-menu-vertical .devui-menu__arrow-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical .devui-menu__arrow-icon path {
    fill: var(--devui-text-weak, #575d6c)
}

.devui-menu-vertical .devui-menu__arrow-icon.is-opened {
    transform: rotate(180deg)
}

.devui-menu-icon+span {
    margin-left: 10px
}

.devui-menu-item-disabled:hover,.devui-submenu-disabled:hover {
    color: var(--devui-menu-disabled)!important;
    cursor: not-allowed!important
}

.devui-submenu-disabled:hover span {
    color: var(--devui-menu-disabled)!important
}

.fade-enter-active,.fade-leave-active {
    transition: opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.fade-leave-to {
    display: none
}

.fade-enter-from,.fade-leave-to {
    opacity: 0
}

.devui-menu-item-disabled,.devui-menu-item-disabled.devui-menu-vertical .devui-menu-item-disabled.devui-menu-item-select .devui-submenu-disabled,.devui-submenu-disabled.devui-menu-vertical,.devui-submenu-disabled.devui-menu-item-select {
    color: var(--devui-menu-disabled)!important;
    cursor: not-allowed!important
}

.devui-message {
    position: fixed;
    z-index: var(--devui-z-index-modal, 1079);
    padding: 10px 15px;
    border-radius: var(--devui-border-radius-feedback, 4px);
    left: 50%;
    transform: translate(-50%);
    top: 80px;
    display: flex;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-color: var(--devui-line, #d7d8da);
    box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
    background-color: var(--devui-base-bg, #ffffff);
    transition: top .5s ease
}

.devui-message--success {
    background-color: var(--devui-success-bg, #cffcee);
    border-color: var(--devui-success-line, #50d4ab)
}

.devui-message--info {
    background-color: var(--devui-info-bg, #e9edfa);
    border-color: var(--devui-info-line, #5e7ce0)
}

.devui-message--warning {
    background-color: var(--devui-warning-bg, #ffe1c7);
    border-color: var(--devui-warning-line, #fa9841)
}

.devui-message--error {
    background-color: var(--devui-danger-bg, #ffd5d4);
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-message__close {
    margin-left: auto;
    padding-left: 10px;
    line-height: 0;
    cursor: pointer
}

.devui-message__image {
    margin-top: 1px;
    display: inline-block;
    width: var(--devui-font-size-icon, 16px);
    min-width: var(--devui-font-size-icon, 16px);
    min-height: var(--devui-font-size-icon, 16px);
    height: var(--devui-font-size-icon, 16px);
    padding: 0;
    line-height: 1;
    margin-right: 10px
}

.devui-message__image--success {
    color: var(--devui-success, #50d4ab)
}

.devui-message__image--info {
    color: var(--devui-info, #5e7ce0)
}

.devui-message__image--warning {
    color: var(--devui-warning, #fac20a)
}

.devui-message__image--error {
    color: var(--devui-danger, #f66f6a)
}

.devui-message__content {
    font-size: var(--devui-font-size-page-title, 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.devui-message__content--success {
    color: var(--devui-success, #50d4ab)
}

.devui-message__content--info {
    color: var(--devui-info, #5e7ce0)
}

.devui-message__content--warning {
    color: var(--devui-warning, #fac20a)
}

.devui-message__content--error {
    color: var(--devui-danger, #f66f6a)
}

.message-fade-enter-active,.message-fade-leave-active {
    transform: translate(-50%);
    transition: all .5s ease
}

.message-fade-enter-from,.message-fade-leave-to {
    opacity: 0;
    transform: translate(-50%,-200%)
}

.devui-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    border-radius: var(--devui-border-radius-card, 8px);
    border: none;
    opacity: 1;
    transform: translate(-50%,-50%);
    background-color: var(--devui-fullscreen-overlay-bg, #ffffff);
    background-clip: padding-box;
    outline: 0;
    box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    z-index: var(--devui-z-index-modal, 1050)
}

.devui-modal .btn-close {
    position: absolute;
    right: 20px;
    top: 18px;
    -webkit-appearance: none;
    z-index: calc(var(--devui-z-index-modal, 1050) + 1)
}

.devui-modal .btn-close .devui-icon__container {
    display: inline-flex;
    align-items: center
}

.devui-modal .type-content {
    display: flex;
    align-items: center
}

.devui-modal .type-content-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    line-height: 16px
}

.devui-modal .type-content-text {
    font-weight: 700;
    vertical-align: middle;
    font-size: 18px
}

.devui-modal-content {
    background: var(--devui-fullscreen-overlay-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px)
}

.devui-modal__header {
    width: 100%;
    height: 46px;
    line-height: 26px;
    padding: 20px 20px 0;
    font-size: var(--devui-font-size-modal-title, 18px);
    font-weight: 700;
    letter-spacing: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none
}

.devui-modal__header .header-alert-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    line-height: 16px;
    text-align: center
}

.devui-modal__body {
    padding: 20px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text-weak, #575d6c);
    box-sizing: border-box
}

.devui-modal__footer {
    width: 100%;
    border-top: none;
    text-align: center;
    padding: 0 32px 24px;
    box-sizing: border-box
}

.devui-modal__footer>* {
    margin: 0 4px
}

.devui-modal--wipe-enter-active {
    transition: opacity .1s cubic-bezier(.16,.75,.5,1),top .1s cubic-bezier(0,0,1,1)
}

.devui-modal--wipe-leave-active {
    transition: opacity .1s cubic-bezier(.5,0,.84,.25),top .1s cubic-bezier(0,0,1,1)
}

.devui-modal--wipe-enter-from,.devui-modal--wipe-leave-to {
    opacity: .2;
    top: calc(50% - 24px)
}

.devui-notification {
    position: fixed;
    top: 50px;
    right: 20px;
    width: 20em;
    word-break: normal;
    word-wrap: break-word;
    z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-notification a:link,.devui-notification a:visited {
    color: var(--devui-link-light, #96adfa)
}

.devui-notification a:hover,.devui-notification a:active {
    color: var(--devui-link-light-active, #beccfa)
}

.devui-notification-item-container {
    position: relative;
    margin: 0 0 8px;
    opacity: .95;
    filter: alpha(opacity=95);
    box-shadow: var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    border-radius: var(--devui-border-radius-feedback, 4px);
    color: var(--devui-feedback-overlay-text, #dfe1e6);
    background-color: var(--devui-feedback-overlay-bg, #464d6e)
}

.devui-notification__item {
    position: relative;
    display: block;
    padding: 12px 16px
}

.devui-notification__icon-close {
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer
}

.devui-notification__icon-close i.icon {
    color: var(--devui-light-text, #ffffff)!important
}

.devui-notification__title {
    font-size: var(--devui-font-size-card-title, 14px);
    padding: 0 0 calc(.5em - 2px) 0;
    display: block;
    font-weight: 700
}

.devui-notification__image {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: 16px;
    top: 14px;
    padding: 0;
    line-height: 1
}

.devui-notification__image.devui-notification__image--warning path.devui-notification__warning-outer {
    fill: var(--devui-warning-line, #fa9841)
}

.devui-notification__image.devui-notification__image--warning path.devui-notification__warning-inner {
    fill: var(--devui-light-text, #ffffff);
    stroke: var(--devui-light-text, #ffffff)
}

.devui-notification__image.devui-notification__image--info {
    background-color: var(--devui-info, #5e7ce0)
}

.devui-notification__image.devui-notification__image--error {
    background-color: var(--devui-danger, #f66f6a)
}

.devui-notification__image.devui-notification__image--success {
    background-color: var(--devui-success, #50d4ab)
}

.devui-notification__image .devui-notification__image-info-path,.devui-notification__image .devui-notification__image-error-path,.devui-notification__image .devui-notification__image-success-path {
    fill: var(--devui-light-text, #ffffff)
}

.devui-notification__message {
    margin-left: 20px
}

.devui-notification__message .devui-notification__content {
    font-size: var(--devui-font-size, 12px);
    margin-top: 4px
}

.devui-notification-message-common .devui-notification__message {
    margin-left: 0
}

.devui-notification__message p {
    font-size: var(--devui-font-size, 12px);
    margin-top: 4px
}

.notification-fade-enter-active,.notification-fade-leave-active {
    transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.notification-fade-enter-from,.notification-fade-leave-to {
    transform: translate(100%)
}

.devui-select {
    position: relative;
    width: 100%;
    font-size: var(--devui-font-size, 12px)
}

.devui-select__selection:hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select--open .devui-select__selection:not(.devui-select__selection--error),.devui-select--focus .devui-select__selection:not(.devui-select__selection--error) {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select--open .devui-select__selection:not(.devui-select__selection--error):hover,.devui-select--focus .devui-select__selection:not(.devui-select__selection--error):hover {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select .devui-tag {
    margin: 4px 0 4px 4px
}

.devui-select .devui-tag .devui-tag__item.devui-tag--md {
    height: 18px;
    line-height: 16px
}

.devui-select .devui-tag .devui-tag__item.devui-tag--default {
    background-color: var(--devui-label-bg, #e9edfa)
}

.devui-select--sm {
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-select--sm .devui-tag {
    margin: 2px 0 2px 4px
}

.devui-select--sm .devui-tag .devui-tag__item.devui-tag--sm {
    height: 18px;
    line-height: 16px
}

.devui-select--lg {
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-select:not(.devui-select--disabled):not(.devui-select--underlined) .devui-select__selection.devui-select__selection--glow-style:hover {
    border-color: var(--devui-form-control-line, #d7d8da);
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select:not(.devui-select--disabled):not(.devui-select--underlined) .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error:hover {
    border-color: var(--devui-danger-line, #f66f6a);
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select--open .devui-select__selection.devui-select__selection--glow-style,.devui-select--focus .devui-select__selection.devui-select__selection--glow-style {
    border-color: var(--devui-form-control-line-active, #5e7ce0)!important;
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select--open .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error,.devui-select--focus .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error {
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-select--underlined {
    border-bottom: 1px solid var(--devui-form-control-line, #d7d8da);
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-select--underlined:not([disabled]):not(.disabled):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select--underlined:not([disabled]):not(.disabled).devui-select--open {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select--underlined .devui-select__input,.devui-select--underlined .devui-select__selection {
    border: none
}

.devui-select--disabled,.devui-select--disabled .devui-select__input,.devui-select--disabled .devui-select__selection {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-select--disabled .devui-select__arrow,.devui-select--disabled .devui-select__clear {
    cursor: not-allowed
}

.devui-select--disabled .devui-select__arrow svg path,.devui-select--disabled .devui-select__clear svg path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-select--open .devui-select__arrow {
    transform: rotate3d(0,0,1,180deg)
}

.devui-dropdown-menu-multiple .devui-select__item.active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: transparent
}

.devui-select__selection {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    color: var(--devui-text, #252b3a);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-select__selection--error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-select__selection--error:hover {
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-select__multiple {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 28px;
    cursor: pointer
}

.devui-select__multiple .devui-select__multiple--input {
    display: flex;
    max-width: 100%;
    min-width: 15px
}

.devui-select__input {
    cursor: pointer;
    width: 100%;
    height: 30px;
    padding: 4px 28px 4px 10px;
    color: var(--devui-text, #252b3a);
    vertical-align: middle;
    outline: none;
    background: none;
    box-sizing: border-box;
    border: none;
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-select__input:not([disabled]):not(.disabled):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select__input:not([disabled]):not(.disabled):focus {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select__input[disabled]:hover,.devui-select__input.disabled:hover {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-select__input.devui-select__input--lg {
    height: 38px
}

.devui-select__input.devui-select__input--sm {
    height: 22px
}

.devui-select__clearable:hover .devui-select__clear {
    display: inline-flex
}

.devui-select__clearable:hover .devui-select__arrow {
    display: none
}

.devui-select__clear,.devui-select__arrow {
    position: absolute;
    right: 0;
    height: 100%;
    width: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.devui-select__clear {
    display: none
}

.devui-select__clear svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-select__clear svg:hover path {
    fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-select__clear--feedback {
    right: 28px
}

.devui-select__arrow {
    transform: rotate3d(0,0,1,0);
    transition: transform .25s ease-out
}

.devui-select__arrow svg path {
    fill: var(--devui-icon-text, #71757f)
}

.devui-select__arrow--feedback {
    right: 28px
}

.devui-select__dropdown {
    overflow: auto
}

.devui-select__dropdown-list {
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    padding: 0;
    margin: 0
}

.devui-select__item {
    font-size: var(--devui-font-size, 12px);
    display: block;
    min-height: 36px;
    line-height: 1.5;
    width: 100%;
    padding: 8px 12px;
    clear: both;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 0;
    color: var(--devui-text, #252b3a);
    box-sizing: border-box;
    cursor: pointer
}

.devui-select__item:hover:not(.active):not(.disabled) {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-select__item.active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-select__item.disabled {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-select--sm .devui-select__item {
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-select--sm .devui-select__item .devui-checkbox .devui-checkbox__material {
    width: var(--devui-font-size-sm, 12px);
    height: var(--devui-font-size-sm, 12px)
}

.devui-select--sm .devui-select__item .devui-checkbox .devui-checkbox__material>svg {
    width: var(--devui-font-size-sm, 12px);
    height: var(--devui-font-size-sm, 12px)
}

.devui-select--lg .devui-select__item {
    font-size: var(--devui-font-size-lg, 14px);
    padding: 11px 10px
}

.devui-scrollbar::-webkit-scrollbar-corner {
    background-color: transparent
}

.devui-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--devui-line, #adb0b8)
}

.devui-select__dropdown--empty {
    text-align: center;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-disabled-text, #cfd0d3);
    min-height: 22px;
    line-height: 22px
}

.devui-select__group {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0
}

.devui-select__group:not(:last-of-type) {
    padding-bottom: 24px
}

.devui-select__group:not(:last-of-type):after {
    content: "";
    position: absolute;
    display: block;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 1px;
    background: var(--devui-dividing-line, #f2f2f3)
}

.devui-select__group-title {
    padding: 4px 12px;
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-aide-text, #71757f)
}

.fade-bottom-enter-from,.fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.fade-bottom-enter-to,.fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.fade-top-enter-from,.fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.fade-top-enter-to,.fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-pagination {
    display: flex;
    align-items: center;
    font-size: var(--devui-font-size, 12px)
}

.devui-pagination .devui-pagination__size {
    position: relative;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 28px;
    height: 32px;
    margin: 0 8px 0 0;
    padding: 4px 10px;
    background-color: var(--devui-base-bg, #ffffff);
    border-color: var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    border-width: 1px;
    border-style: solid;
    color: var(--devui-text, #252b3a);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    outline: 0;
    box-sizing: border-box;
    cursor: pointer
}

.devui-pagination .devui-pagination__size span {
    margin-right: 8px
}

.devui-pagination .devui-pagination__size svg {
    transition: transform var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-pagination .devui-pagination__size svg path {
    fill: var(--devui-text, #252b3a)
}

.devui-pagination .devui-pagination__size:hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-pagination .devui-pagination__size:focus {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-pagination .devui-pagination__size.devui-pagination__size--sm {
    height: 26px
}

.devui-pagination .devui-pagination__size.devui-pagination__size--lg {
    height: 46px
}

.devui-pagination .devui-pagination__size.devui-pagination__size--open svg {
    transform: rotate(180deg)
}

.devui-pagination .devui-pagination__size>.devui-icon__container {
    display: flex;
    align-items: center
}

.devui-pagination .devui-pagination__total-size {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 0 12px 0 0;
    color: var(--devui-text-weak, #575d6c)
}

.devui-pagination .devui-pagination__list,.devui-pagination .devui-pagination__item {
    padding: 0;
    margin: 0;
    list-style: none
}

.devui-pagination a {
    text-decoration: none;
    color: #3eaf7c
}

.devui-pagination .devui-pagination__list {
    vertical-align: middle;
    display: inline-flex;
    align-items: center
}

.devui-pagination .devui-pagination__list>.disabled>a,.devui-pagination .devui-pagination__list>.disabled>a:hover,.devui-pagination .devui-pagination__list>.disabled>a:focus {
    cursor: not-allowed
}

.devui-pagination .devui-pagination__list li.devui-pagination__item {
    cursor: pointer
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled).active a.devui-pagination__link {
    text-decoration: none;
    background-color: var(--devui-primary, #5e7ce0);
    color: var(--devui-light-text, #ffffff);
    cursor: pointer
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled).active a.devui-pagination__link:hover {
    text-decoration: none;
    background-color: var(--devui-primary, #5e7ce0);
    color: var(--devui-light-text, #ffffff);
    border: 1px solid transparent;
    box-shadow: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    margin-left: 4px;
    padding: 0 4px;
    line-height: 24px;
    border-radius: var(--devui-border-radius, 2px);
    border: 1px solid transparent;
    color: var(--devui-text-weak, #575d6c);
    transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link:hover {
    text-decoration: none;
    background-color: transparent;
    color: var(--devui-text, #252b3a);
    border: 1px solid var(--devui-dividing-line, #f2f2f3);
    box-shadow: 0 1px 3px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link svg {
    vertical-align: middle
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link svg g polygon {
    fill: var(--devui-icon-text, #71757f)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link:hover {
    box-shadow: none;
    border: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link svg g polygon {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled) a.devui-pagination__link:active svg g polygon {
    fill: var(--devui-text, #252b3a)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled) a.devui-pagination__link:hover:not(:active) svg g polygon {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-pagination .devui-pagination--sm>li.devui-pagination__item>a.devui-pagination__link {
    min-width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-pagination .devui-pagination--lg>li.devui-pagination__item>a.devui-pagination__link {
    min-width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-pagination .devui-pagination__jump-container {
    display: inline-flex;
    position: relative;
    margin: 0 12px;
    vertical-align: middle;
    align-items: center
}

.devui-pagination .devui-pagination__jump-container .devui-input {
    display: inline-block;
    width: 42px;
    vertical-align: middle;
    margin: 0 4px
}

.devui-pagination .devui-pagination__jump-container .devui-input--lg {
    width: 56px
}

.devui-pagination .devui-pagination__jump-button {
    display: inline-flex;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: var(--devui-border-radius, 2px);
    border: 1px solid var(--devui-line, #d7d8da);
    cursor: pointer;
    margin-left: 4px;
    align-items: center;
    justify-content: center
}

.devui-pagination .devui-pagination__jump-button .devui-pagination__go {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid var(--devui-icon-text, #71757f);
    border-bottom: 6px solid transparent
}

.devui-pagination .devui-pagination__jump-button:hover {
    border-color: var(--devui-brand-active, #526ecc)
}

.devui-pagination .devui-pagination__jump-button:hover .devui-pagination__go {
    border-left-color: var(--devui-brand-active, #526ecc)
}

.devui-pagination .devui-pagination__jump-size--default {
    width: 28px;
    height: 28px
}

.devui-pagination .devui-pagination__jump-size--default .devui-pagination__go {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 10px solid var(--devui-icon-text, #71757f);
    border-bottom: 8px solid transparent
}

.devui-pagination .devui-pagination__jump-size--sm {
    width: 24px;
    height: 24px
}

.devui-pagination .devui-pagination__jump-size--sm .devui-pagination__go {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid var(--devui-icon-text, #71757f);
    border-bottom: 6px solid transparent
}

.devui-pagination .devui-pagination__jump-size--sm .devui-pagination__link {
    height: 30px;
    line-height: 32px
}

.devui-pagination .devui-pagination__jump-size--lg {
    width: 46px;
    height: 46px
}

.devui-pagination .devui-pagination__jump-size--lg .devui-pagination__go {
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-left: 14px solid var(--devui-icon-text, #71757f);
    border-bottom: 14px solid transparent
}

.devui-pagination .devui-pagination__config {
    color: var(--devui-text, #252b3a);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px
}

.devui-pagination .devui-pagination__setup-icon {
    line-height: 30px;
    cursor: pointer;
    display: flex
}

.devui-pagination .devui-pagination__config-container {
    padding: 4px 0;
    box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    border-radius: var(--devui-border-radius, 2px);
    width: 150px;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    line-height: 26px;
    position: absolute;
    left: -136px;
    top: 28px;
    cursor: auto;
    z-index: var(--devui-z-index-dropdown, 1052);
    -webkit-user-select: none;
    user-select: none
}

.devui-pagination .devui-pagination__config-item {
    padding-bottom: 8px;
    padding-top: 4px;
    border-bottom: 1px solid var(--devui-line, #d7d8da)
}

.devui-pagination .devui-pagination__config-item:last-child {
    border-bottom: none
}

.devui-pagination .config-item-title {
    color: var(--devui-line, #d7d8da);
    padding-left: 8px;
    font-size: var(--devui-font-size, 12px);
    line-height: 1.5
}

.devui-pagination .devui-pagination__number {
    padding-left: 8px;
    margin-top: 4px;
    display: flex
}

.devui-pagination .devui-pagination__number div {
    color: var(--devui-text, #252b3a);
    cursor: pointer;
    border-top: 1px solid var(--devui-line, #d7d8da);
    border-bottom: 1px solid var(--devui-line, #d7d8da);
    border-right: 1px solid var(--devui-line, #d7d8da);
    text-align: center;
    height: 26px;
    width: 26px
}

.devui-pagination .devui-pagination__number div:first-child {
    border-left: 1px solid var(--devui-line, #d7d8da)
}

.devui-pagination .devui-pagination__number div:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-pagination .devui-pagination__number div.choosed {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)!important;
    cursor: auto!important
}

.devui-pagination .config-item-words {
    color: var(--devui-text, #252b3a);
    padding-left: 8px;
    font-size: var(--devui-font-size, 12px);
    margin-top: 4px
}

.devui-pagination .config-item-words:hover {
    background-color: var(--devui-area, #f5f5f5);
    cursor: pointer
}

.devui-pagination__size-list {
    min-width: 60px;
    padding: 12px;
    background-clip: padding-box;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px);
    outline: none
}

.devui-pagination__size-list ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.devui-pagination__size-list li {
    display: block;
    width: 100%;
    min-height: 36px;
    line-height: 20px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--devui-border-radius, 2px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-pagination__size-list li:hover:not(.active) {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-pagination__size-list li.active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.no-left-padding.devui-panel-body-collapse:before {
    content: none!important
}

.no-left-padding.devui-panel-body-collapse .devui-panel-content {
    border-left: none!important
}

.devui-panel {
    line-height: 1.5;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-panel .devui-panel-heading {
    padding: 12px 20px;
    color: var(--devui-text, #252b3a)
}

.devui-panel .devui-panel-heading d-panel-header {
    line-height: 1.5
}

.devui-panel .devui-panel-body {
    display: flex;
    position: relative;
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-panel .devui-panel-body .devui-panel-content {
    line-height: 1.5;
    padding: 15px;
    background: var(--devui-base-bg, #ffffff);
    flex: 1
}

.devui-panel .devui-panel-body.devui-panel-body-collapse:before {
    content: "";
    width: 30px;
    height: 100%
}

.devui-panel .devui-panel-body.devui-panel-body-collapse .devui-panel-content {
    border-left: 2px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-panel .devui-panel-footer {
    padding: 10px 15px;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-area, #f5f5f5)
}

.devui-panel .devui-panel-footer d-panel-footer {
    line-height: 1.5
}

.devui-panel.devui-panel-default .devui-panel-heading,.devui-panel.devui-panel-default .devui-panel-body {
    background-color: var(--devui-default-bg, #f7f8fa)
}

.devui-panel.devui-panel-primary .devui-panel-heading,.devui-panel.devui-panel-primary .devui-panel-body {
    background-color: var(--devui-primary-bg, #f2f5fc)
}

.devui-panel.devui-panel-primary .devui-panel-body-collapse .devui-panel-content {
    border-color: var(--devui-primary-line, #5e7ce0)
}

.devui-panel.devui-panel-info .devui-panel-heading,.devui-panel.devui-panel-info .devui-panel-body {
    background-color: var(--devui-info-bg, #e9edfa)
}

.devui-panel.devui-panel-info .devui-panel-body-collapse .devui-panel-content {
    border-color: var(--devui-info-line, #5e7ce0)
}

.devui-panel.devui-panel-success .devui-panel-heading,.devui-panel.devui-panel-success .devui-panel-body {
    background-color: var(--devui-success-bg, #cffcee)
}

.devui-panel.devui-panel-success .devui-panel-body-collapse .devui-panel-content {
    border-color: var(--devui-success-line, #50d4ab)
}

.devui-panel.devui-panel-warning .devui-panel-heading,.devui-panel.devui-panel-warning .devui-panel-body {
    background-color: var(--devui-warning-bg, #ffe1c7)
}

.devui-panel.devui-panel-warning .devui-panel-body-collapse .devui-panel-content {
    border-color: var(--devui-warning-line, #fa9841)
}

.devui-panel.devui-panel-danger .devui-panel-heading,.devui-panel.devui-panel-danger .devui-panel-body {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-panel.devui-panel-danger .devui-panel-body-collapse .devui-panel-content {
    border-color: var(--devui-danger-line, #f66f6a)
}

.devui-panel .devui-panel-leave-active {
    transition: all .3s ease-in-out;
    animation: panelUpOut .3s ease-in-out;
    animation-fill-mode: both
}

.devui-panel .devui-panel-enter-active {
    transition: all .3s ease-in-out;
    animation: panelUpIn .3s ease-in-out;
    animation-fill-mode: both
}

@keyframes panelUpOut {
    0% {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity: 1
    }

    to {
        transform: scaleY(0);
        transform-origin: 0% 0%;
        opacity: 0
    }
}

@keyframes panelUpIn {
    0% {
        transform: scaleY(0);
        transform-origin: 0% 0%;
        opacity: 0
    }

    to {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity: 1
    }
}

.devui-progress__content {
    display: flex;
    flex-wrap: nowrap
}

.devui-progress__content .devui-progress__line {
    width: 100%;
    position: relative;
    background: var(--devui-dividing-line, #f2f2f3)
}

.devui-progress__content .devui-progress__line .devui-progress__bar {
    width: 0;
    height: 100%;
    transition: width .6s ease;
    background-color: #5e7ce0
}

.devui-progress__content .devui-progress__line .devui-progress__bar>span {
    display: block;
    white-space: nowrap;
    color: var(--devui-light-text, #ffffff);
    font-size: 12px;
    line-height: 1.5;
    padding: 0 10px
}

.devui-progress__content .devui-progress__line>span {
    display: block;
    white-space: nowrap;
    color: var(--devui-light-text, #ffffff);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    font-size: 12px;
    line-height: 1.5
}

.devui-progress__content .devui-progress__line .inside {
    text-align: center
}

.devui-progress__content .devui-progress__line .insideLeft {
    text-align: left
}

.devui-progress__content .devui-progress__line .insideRight {
    text-align: right
}

.devui-progress__content>span {
    min-width: 46px;
    padding: 0 5px;
    text-align: center
}

.devui-progress__circle {
    position: relative
}

.devui-progress__circle .devui-progress__circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--devui-text, #252b3a);
    line-height: 1;
    white-space: normal;
    text-align: center;
    transform: translate(-50%,-50%)
}

.devui-quadrant-diagram canvas {
    z-index: 1
}

.devui-radio {
    font-size: var(--devui-font-size, 12px);
    line-height: 1.5;
    font-weight: 400;
    cursor: pointer;
    color: var(--devui-text, #252b3a)
}

.devui-radio__wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.devui-radio.active .devui-radio__material {
    border-width: 4px;
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-radio.active.devui-radio--bordered {
    border-color: var(--devui-primary-hover, #7693f5)
}

.devui-radio.disabled {
    cursor: not-allowed
}

.devui-radio.disabled .devui-radio__label {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-radio.disabled.devui-radio--bordered {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-radio.disabled .devui-radio__material {
    border-color: var(--devui-shape-icon-fill, #d7d8da);
    background-color: var(--devui-shape-icon-fill-disabled, #f5f5f5)
}

.devui-radio.disabled.active .devui-radio__material {
    border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-radio__material {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 16px;
    width: 16px;
    border: 1px solid var(--devui-shape-icon-fill, #d7d8da);
    border-radius: var(--devui-border-radius-full, 100px);
    transform: translateY(-1px);
    -webkit-user-select: none;
    user-select: none;
    transition: border var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-radio__label {
    color: var(--devui-text, #252b3a);
    margin-left: 8px;
    font-size: var(--devui-font-size, 12px)
}

.devui-radio__input {
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
    pointer-events: none
}

.devui-radio--glow-style.devui-radio .devui-radio__material {
    transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-radio--glow-style.devui-radio:not(.disabled):hover .devui-radio__material {
    box-shadow: 0 0 0 6px var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-radio--bordered {
    border: 1px solid var(--devui-disabled-line, #dfe1e6);
    border-radius: var(--devui-border-radius, 2px);
    padding: 0 15px 0 10px
}

.devui-radio.devui-radio--lg {
    display: flex;
    align-items: center
}

.devui-radio.devui-radio--lg .devui-radio__label {
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-radio.devui-radio--lg .devui-radio__material {
    width: 18px;
    height: 18px
}

.devui-radio.devui-radio--lg .devui-radio__material>svg {
    width: 18px;
    height: 18px
}

.devui-radio.devui-radio--lg.devui-radio--bordered {
    height: 40px
}

.devui-radio.devui-radio--md {
    display: flex;
    align-items: center
}

.devui-radio.devui-radio--md .devui-radio__label {
    font-size: var(--devui-font-size-md, 12px)
}

.devui-radio.devui-radio--md .devui-radio__material {
    width: 16px;
    height: 16px
}

.devui-radio.devui-radio--md .devui-radio__material>svg {
    width: 16px;
    height: 16px
}

.devui-radio.devui-radio--md.devui-radio--bordered {
    height: 32px
}

.devui-radio.devui-radio--sm {
    display: flex;
    align-items: center
}

.devui-radio.devui-radio--sm .devui-radio__label {
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-radio.devui-radio--sm .devui-radio__material {
    width: 14px;
    height: 14px
}

.devui-radio.devui-radio--sm .devui-radio__material>svg {
    width: 14px;
    height: 14px
}

.devui-radio.devui-radio--sm.devui-radio--bordered {
    height: 24px
}

.devui-radio-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start
}

.devui-radio-group.is-row {
    flex-direction: row
}

.devui-radio-group.is-column {
    flex-direction: column
}

.devui-radio-group .devui-radio__wrapper {
    min-height: 28px
}

.devui-radio-group .devui-radio__wrapper:not(:last-child) {
    padding-right: 20px
}

.devui-radio-button {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--devui-btn-padding, 0 20px);
    height: 32px;
    font-size: var(--devui-font-size-md, 12px);
    color: var(--devui-text, #252b3a);
    cursor: pointer;
    border: 1px solid var(--devui-line, #d7d8da);
    -webkit-user-select: none;
    user-select: none
}

.devui-radio-button.devui-radio-button--lg {
    font-size: var(--devui-font-size-lg, 14px);
    padding: var(--devui-btn-lg-padding, 0 24px);
    height: 40px;
    line-height: 40px
}

.devui-radio-button.devui-radio-button--md {
    font-size: var(--devui-font-size-md, 12px);
    padding: var(--devui-btn-padding, 0 20px);
    height: 32px;
    line-height: 32px
}

.devui-radio-button.devui-radio-button--sm {
    font-size: var(--devui-font-size-sm, 12px);
    padding: var(--devui-btn-sm-padding, 0 16px);
    height: 24px;
    line-height: 24px
}

.devui-radio-button__input {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none
}

.devui-radio-button.active {
    color: #fff;
    background-color: var(--devui-brand, #5e7ce0);
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-radio-button.active.disabled {
    color: #fff;
    background-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-radio-button.disabled {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: #fff;
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-radio-group.is-row .devui-radio-button {
    border-left: none
}

.devui-radio-group.is-row .devui-radio-button:first-child {
    border-top-left-radius: var(--devui-border-radius, 2px);
    border-bottom-left-radius: var(--devui-border-radius, 2px);
    border-left: 1px solid var(--devui-disabled-line, #dfe1e6)
}

.devui-radio-group.is-row .devui-radio-button:last-child {
    border-top-right-radius: var(--devui-border-radius, 2px);
    border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-radio-group.is-column .devui-radio-button {
    width: 100%;
    border-top: none
}

.devui-radio-group.is-column .devui-radio-button:first-child {
    border-top-left-radius: var(--devui-border-radius, 2px);
    border-top-right-radius: var(--devui-border-radius, 2px);
    border-top: 1px solid var(--devui-disabled-line, #dfe1e6)
}

.devui-radio-group.is-column .devui-radio-button:last-child {
    border-bottom-left-radius: var(--devui-border-radius, 2px);
    border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-rate--align {
    font-size: var(--devui-font-size-icon, 16px);
    margin-right: 5px;
    position: relative;
    line-height: 1
}

.devui-rate--pointer {
    cursor: pointer
}

.devui-rate {
    display: inline-flex
}

.devui-rate__color-active {
    line-height: 1.5
}

.devui-rate__color-active i {
    color: var(--devui-brand, #5e7ce0)
}

.devui-rate__color-active svg g {
    fill: var(--devui-brand, #5e7ce0)
}

.devui-rate__color--success i {
    color: #3dcca6
}

.devui-rate__color--success svg g {
    fill: #3dcca6
}

.devui-rate__color--warning i {
    color: #fac20a
}

.devui-rate__color--warning svg g {
    fill: #fac20a
}

.devui-rate__color--error i {
    color: #f66f6a
}

.devui-rate__color--error svg g {
    fill: #f66f6a
}

.devui-rate__color--customize {
    color: var(--star-color)
}

.devui-rate__color--customize svg g {
    fill: var(--star-color)
}

.devui-rate__active-star {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.devui-rate__color {
    color: var(--devui-shape-icon-fill, #d7d8da);
    line-height: 1.5
}

.devui-rate__color .icon {
    color: var(--devui-shape-icon-fill, #d7d8da)!important
}

.devui-rate__color svg g {
    fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-rate--only-read {
    cursor: not-allowed
}

.devui-read-tip {
    position: relative
}

.devui-read-tip .title {
    font-size: 16px
}

.source {
    overflow: initial
}

.read-tip-container {
    font-size: var(--devui-font-size, 12px);
    position: absolute;
    width: max-content;
    height: max-content;
    line-height: 1.5;
    border: none;
    border-radius: var(--devui-border-radius-feedback, 4px);
    background-color: var(--devui-feedback-overlay-bg, #464d6e);
    color: var(--devui-feedback-overlay-text, #dfe1e6);
    overflow-wrap: break-word;
    padding: 10px;
    z-index: 50
}

.read-tip-container .after {
    content: "";
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    position: absolute;
    background-color: var(--devui-feedback-overlay-bg, #464d6e)
}

.read-tip-container.top .after {
    bottom: -4px
}

.read-tip-container.left .after {
    right: -4px
}

.read-tip-container.right .after {
    left: -4px
}

.read-tip-container.bottom .after {
    top: -4px
}

.devui-result {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
    padding: 30px
}

.devui-result__icon-success:before {
    color: var(--devui-success, #50d4ab)
}

.devui-result__icon-danger:before {
    color: var(--devui-danger, #f66f6a)
}

.devui-result__icon-warning:before {
    color: var(--devui-warning, #fac20a)
}

.devui-result__icon-info:before {
    color: var(--devui-info, #5e7ce0)
}

.devui-result__title {
    margin-top: 20px;
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-result__desc {
    margin-top: 10px;
    color: var(--devui-text-weak, #575d6c);
    font-size: var(--devui-font-size-md, 12px)
}

.devui-result__extra {
    margin-top: 30px
}

.devui-search {
    position: relative;
    border-radius: var(--devui-border-radius, 2px);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
    display: flex;
    justify-content: center;
    align-items: center
}

.devui-search:not(.devui-search--error):not(.devui-search--disabled):not(.devui-search--focus):not(.devui-search--glow-style):hover .devui-input {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-search .devui-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 4px 60px 4px 8px;
    font-size: var(--devui-font-size-md, 12px);
    color: var(--devui-text, #252b3a);
    box-sizing: border-box;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-form-control-bg, #ffffff);
    transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-search .devui-input__inner {
    padding: 0
}

.devui-search .devui-input__wrapper {
    border: none;
    padding: 0
}

.devui-search--focus .devui-input {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-search__clear,.devui-search__icon {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center
}

.devui-search__clear svg path,.devui-search__icon svg path {
    fill: var(--devui-icon-text, #71757f)
}

.devui-search__clear {
    position: absolute;
    right: 36px;
    cursor: pointer;
    font-size: 10px;
    width: 30px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.devui-search__clear>svg path {
    fill: var(--devui-shape-icon-fill, #d7d8da);
    transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-search__clear>svg:hover path {
    fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-search__clear:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 46%;
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-search__icon {
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0
}

.devui-search--glow-style:not(.devui-search--disabled):hover,.devui-search--glow-style:not(.devui-search--disabled).devui-search--focus {
    box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-search--sm .devui-input {
    height: 24px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-search--sm .devui-input.devui-input--sm {
    font-size: var(--devui-font-size, 12px);
    padding-right: 60px
}

.devui-search--sm .devui-search__icon {
    width: 34px;
    height: 26px
}

.devui-search--sm .devui-search__icon svg {
    width: 14px;
    height: 14px
}

.devui-search--sm .devui-search__clear {
    width: 26px;
    height: 100%;
    right: 34px
}

.devui-search--sm .devui-search__clear>svg {
    width: 14px;
    height: 14px
}

.devui-search--sm .devui-search__clear {
    right: 24px
}

.devui-search--lg .devui-input {
    height: 40px;
    font-size: var(--devui-font-size-lg, 14px)
}

.devui-search--lg .devui-input.devui-input--lg {
    padding: 4px 80px 4px 10px
}

.devui-search--lg .devui-search__icon,.devui-search--lg .devui-search__clear {
    width: 40px;
    height: 40px
}

.devui-search--lg .devui-search__icon svg,.devui-search--lg .devui-search__clear svg {
    width: 18px;
    height: 18px
}

.devui-search--lg .devui-search__clear {
    right: 40px
}

.devui-search--disabled .devui-input {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3);
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-search--disabled .devui-search__icon {
    cursor: not-allowed
}

.devui-search--disabled .icon-search {
    color: var(--devui-disabled-text, #cfd0d3)!important
}

.devui-search--left .devui-input {
    padding-right: 32px;
    padding-left: 32px
}

.devui-search--left .devui-input.devui-input--lg {
    padding-right: 40px;
    padding-left: 40px
}

.devui-search--left .devui-input.devui-input--sm {
    padding-right: 24px;
    padding-left: 24px
}

.devui-search--left .devui-search__clear {
    right: 0
}

.devui-search--left .devui-search__clear:after {
    display: none
}

.devui-search--left .devui-search__icon {
    left: 0
}

.devui-search--no-border .devui-input,.devui-search--no-border .devui-input__wrapper {
    background-color: unset
}

.devui-search--no-border:not(.devui-search--focus) .devui-input:not(:hover,:focus,:active) {
    border: 1px solid transparent
}

.devui-skeleton-item {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-skeleton-item--round {
    border-radius: var(--devui-border-radius, 2px)
}

.devui-skeleton-item--square {
    width: 100%;
    height: 16px
}

.devui-skeleton-item--circle {
    border-radius: 50%
}

.devui-skeleton-item--circle.devui-skeleton-item--sm {
    width: 20px;
    height: 20px
}

.devui-skeleton-item--circle.devui-skeleton-item--md {
    width: 40px;
    height: 40px
}

.devui-skeleton-item--circle.devui-skeleton-item--lg {
    width: 60px;
    height: 60px
}

.devui-skeleton-item--image {
    display: flex;
    justify-content: center;
    align-items: center
}

.devui-skeleton-item--image svg {
    width: 40%;
    height: 40%
}

.devui-skeleton-item--image.devui-skeleton-item--sm {
    width: 50px;
    height: 50px
}

.devui-skeleton-item--image.devui-skeleton-item--md {
    width: 100px;
    height: 100px
}

.devui-skeleton-item--image.devui-skeleton-item--lg {
    width: 200px;
    height: 200px
}

.devui-skeleton-item--animation.devui-skeleton-item {
    background: linear-gradient(100deg,#fff0 40%,#ffffff80,#fff0 60%) var(--devui-list-item-hover-bg, #f2f2f3);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 2s skeletonLoading ease-in-out infinite
}

@keyframes skeletonLoading {
    to {
        background-position-x: -20%
    }
}

.devui-skeleton {
    width: 100%
}

.devui-skeleton__paragraph {
    margin-bottom: 12px
}

.devui-skeleton__paragraph:last-child {
    width: 60%;
    margin-bottom: 0
}

.devui-skeleton-item.devui-skeleton__title {
    width: 40%;
    margin-bottom: 16px
}

.devui-slider {
    position: relative;
    width: 100%;
    display: block
}

.devui-slider.disabled {
    cursor: not-allowed;
    background-color: var(--devui-disabled-line, #dfe1e6);
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-slider__runway {
    position: relative;
    width: 100%;
    padding: 4px 0;
    margin: 4px 0;
    cursor: pointer;
    box-sizing: border-box;
    height: 5px;
    display: flex;
    align-items: center;
    border-radius: var(--devui-border-radius-full, 100px);
    background-color: var(--devui-area, #f5f5f5)
}

.devui-slider__runway.disabled {
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-slider__runway:hover .devui-slider__bar:not(.disabled) {
    background-color: var(--devui-brand-hover, #7693f5)
}

.devui-slider__runway .devui-slider__bar {
    height: 6px;
    background-color: var(--devui-brand, #5e7ce0);
    border-top-left-radius: var(--devui-border-radius-full, 100px);
    border-bottom-left-radius: var(--devui-border-radius-full, 100px);
    position: absolute
}

.devui-slider__runway .devui-slider__bar.disabled {
    background-color: var(--devui-disabled-line, #dfe1e6);
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-slider__runway .devui-slider__bar.disabled:hover {
    cursor: not-allowed
}

.devui-slider__runway .devui-slider__button {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--devui-brand, #5e7ce0);
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: 50%;
    margin-left: -7px;
    transition: transform .2s ease-in-out
}

.devui-slider__runway .devui-slider__button:hover:not(.disabled) {
    border-color: var(--devui-brand-hover, #7693f5);
    transform: scale(1.3)
}

.devui-slider__runway .devui-slider__button.disabled {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-slider__runway .devui-slider__button.disabled {
    cursor: not-allowed
}

.devui-slider__runway .devui-slider__popover {
    position: relative;
    bottom: 26px;
    transform: translate(-50%);
    border-radius: var(--devui-border-radius-feedback, 4px);
    font-size: var(--devui-font-size-sm, 12px);
    color: var(--devui-feedback-overlay-text, #dfe1e6)
}

.devui-slider__runway .devui-slider__popover .devui-slider__popover-arrow {
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    display: block;
    z-index: -1;
    background-color: var(--devui-feedback-overlay-bg, #464d6e)
}

.devui-slider__runway .devui-slider__popover .devui-slider__popover-content {
    padding: 5px 14px;
    text-align: center;
    border-radius: var(--devui-border-radius-feedback, 4px);
    background-color: var(--devui-feedback-overlay-bg, #464d6e)
}

.devui-splitter__bar {
    background-color: var(--devui-dividing-line, #f2f2f3);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0
}

.devui-splitter__bar .devui-splitter__collapse {
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute;
    z-index: 15;
    cursor: pointer
}

.devui-splitter__bar .devui-splitter__collapse:before,.devui-splitter__bar .devui-splitter__collapse:after {
    content: "";
    width: 10px;
    height: 2px;
    background: #fff;
    display: block;
    position: absolute
}

.devui-splitter__bar .devui-splitter__collapse:hover {
    background-color: var(--devui-brand-hover, #7693f5)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse {
    width: 12px;
    height: 30px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.hidden,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.hidden {
    display: none
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev {
    border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;
    left: 100%
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before,.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before {
    top: 9px;
    left: 1px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before {
    transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before {
    transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after,.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after {
    top: 18px;
    left: 1px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after {
    transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after {
    transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next {
    border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);
    right: 100%
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before {
    top: 9px;
    right: 1px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before {
    transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before {
    transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after {
    top: 18px;
    right: 1px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after {
    transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after {
    transform: rotate(70deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse {
    height: 12px;
    width: 30px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.hidden,.devui-splitter__bar--vertical .devui-splitter__collapse.next.hidden {
    display: none
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev {
    border-radius: 0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);
    top: 100%
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before,.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before {
    bottom: 5px;
    left: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before {
    transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before {
    transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after,.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after {
    bottom: 5px;
    left: 14px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after {
    transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after {
    transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next {
    border-radius: var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;
    bottom: 100%
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:before,.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before {
    top: 5px;
    left: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:before {
    transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before {
    transform: rotate(-20deg);
    top: 5px;
    left: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:after,.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after {
    top: 5px;
    left: 14px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:after {
    transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after {
    transform: rotate(20deg)
}

.devui-splitter__bar--horizontal.resizable:not(.none-resizable):hover,.devui-splitter__bar--horizontal.resizable:not(.none-resizable):focus,.devui-splitter__bar--horizontal.resizable:not(.none-resizable):active,.devui-splitter__bar--vertical.resizable:not(.none-resizable):hover,.devui-splitter__bar--vertical.resizable:not(.none-resizable):focus,.devui-splitter__bar--vertical.resizable:not(.none-resizable):active {
    background-color: var(--devui-brand-hover, #7693f5)
}

.devui-splitter__bar--horizontal.resizable:not(.none-resizable):after,.devui-splitter__bar--vertical.resizable:not(.none-resizable):after {
    content: "";
    display: block;
    position: absolute;
    z-index: 10
}

.devui-splitter__bar--horizontal.resizable {
    cursor: col-resize
}

.devui-splitter__bar--horizontal.resizable:after {
    cursor: col-resize;
    height: 100%;
    width: 10px;
    top: 0
}

.devui-splitter__bar--vertical.resizable {
    cursor: row-resize
}

.devui-splitter__bar--vertical.resizable:after {
    cursor: row-resize;
    width: 100%;
    height: 10px;
    left: 0
}

.devui-splitter {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    border-radius: var(--devui-border-radius, 2px)
}

.devui-splitter.devui-splitter--horizontal {
    flex-direction: row
}

.devui-splitter.devui-splitter--vertical {
    flex-direction: column
}

.devui-splitter__pane {
    position: relative;
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: 100%
}

.devui-splitter__pane--fixed {
    flex-grow: 0;
    flex-shrink: 0
}

.devui-splitter__pane--hidden {
    flex: 0!important;
    overflow: hidden!important
}

.devui-splitter__pane--grow {
    flex-grow: 1!important
}

.devui-statistic {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5715;
    list-style: none
}

.devui-statistic__title {
    margin-bottom: 4px;
    font-size: 14px
}

.devui-statistic__content {
    font-size: 24px;
    display: flex;
    align-items: center
}

.devui-statistic__prefix {
    margin-right: 6px;
    display: flex;
    align-items: center
}

.devui-statistic__suffix {
    margin-left: 6px;
    display: flex;
    align-items: center
}

.devui-statistic__value {
    display: inline-block
}

.devui-status {
    line-height: 20px;
    height: 20px;
    display: flex;
    align-items: center
}

.devui-status:before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 100%
}

.devui-status.devui-status__bg--success:before {
    background-color: var(--devui-success, #50d4ab)
}

.devui-status.devui-status__bg--error:before {
    background-color: var(--devui-danger, #f66f6a)
}

.devui-status.devui-status__bg--warning:before {
    background-color: var(--devui-warning, #fac20a)
}

.devui-status.devui-status__bg--initial:before {
    background-color: var(--devui-initial, #e9edfa)
}

.devui-status.devui-status__bg--waiting:before {
    background-color: var(--devui-waiting, #beccfa)
}

.devui-status.devui-status__bg--running:before {
    background-color: var(--devui-info, #5e7ce0)
}

.devui-status.devui-status__bg--invalid:before {
    background-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-steps {
    display: flex
}

.devui-steps.vertical {
    flex-direction: column;
    height: 100%
}

.devui-steps.vertical .devui-step {
    flex-direction: row
}

.devui-steps.vertical .devui-step__line {
    width: 1px;
    height: 100%;
    left: 12px;
    top: 24px
}

.devui-steps.vertical .devui-step__content {
    margin-left: 8px;
    padding-top: 2px
}

.devui-steps.simple .devui-step {
    position: relative;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: var(--devui-brand-foil, #f2f2f3);
    color: var(--devui-text, #252b3a)
}

.devui-steps.simple .devui-step:not(:first-child) {
    margin-left: 18px
}

.devui-steps.simple .devui-step:not(:last-child) {
    margin-right: 18px
}

.devui-steps.simple .devui-step:not(:first-child):before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -28px;
    top: 0;
    border: solid 18px transparent;
    border-top-color: var(--devui-brand-foil, #f2f2f3);
    border-right-color: var(--devui-brand-foil, #f2f2f3);
    border-bottom-color: var(--devui-brand-foil, #f2f2f3)
}

.devui-steps.simple .devui-step:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -36px;
    top: 0;
    border: solid 18px transparent;
    border-left-color: var(--devui-brand-foil, #f2f2f3)
}

.devui-steps.simple .devui-step.active {
    background-color: var(--devui-brand, #5e7ce0);
    color: var(--devui-light-text, #ffffff)
}

.devui-steps.simple .devui-step.active:before {
    border-top-color: var(--devui-brand, #5e7ce0);
    border-right-color: var(--devui-brand, #5e7ce0);
    border-bottom-color: var(--devui-brand, #5e7ce0)
}

.devui-steps.simple .devui-step.active:after {
    border-left-color: var(--devui-brand, #5e7ce0)
}

.devui-steps.simple .devui-step.finished {
    background-color: var(--devui-success, #50d4ab);
    color: var(--devui-light-text, #ffffff)
}

.devui-steps.simple .devui-step.finished:before {
    border-top-color: var(--devui-success, #50d4ab);
    border-right-color: var(--devui-success, #50d4ab);
    border-bottom-color: var(--devui-success, #50d4ab)
}

.devui-steps.simple .devui-step.finished:after {
    border-left-color: var(--devui-success, #50d4ab)
}

.devui-step {
    display: flex;
    flex-direction: column;
    flex-shrink: 1
}

.devui-step:last-child {
    flex-shrink: 0
}

.devui-step:last-child:not(.center):not(.devui-step--simple) {
    flex-basis: auto!important
}

.devui-step:last-child .devui-step__line {
    display: none
}

.devui-step__dot-container {
    position: relative
}

.devui-step__content {
    display: flex;
    flex-direction: column
}

.devui-step__dot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--devui-brand-foil, #f2f2f3);
    color: var(--devui-text, #252b3a)
}

.devui-step__line {
    position: absolute;
    top: 12px;
    left: 24px;
    width: calc(100% - 24px);
    height: 1px;
    background-color: var(--devui-line, #d7d8da)
}

.devui-step__title {
    color: var(--devui-placeholder, #babbc0)
}

.devui-step__description {
    color: var(--devui-placeholder, #babbc0);
    font-size: 12px
}

.devui-step.active .devui-step__dot {
    background-color: var(--devui-brand, #5e7ce0);
    color: var(--devui-light-text, #ffffff)
}

.devui-step.active .devui-step__title,.devui-step.active .devui-step__description {
    color: var(--devui-brand, #5e7ce0)
}

.devui-step.finished .devui-step__dot {
    background-color: var(--devui-success, #50d4ab)
}

.devui-step.finished .devui-step__title,.devui-step.finished .devui-step__description {
    color: var(--devui-success, #50d4ab)
}

.devui-step.center {
    text-align: center
}

.devui-step.center .devui-step__line {
    left: calc(50% + 12px)
}

.devui-step.wait .devui-step__dot {
    background-color: var(--devui-brand-foil, #f2f2f3);
    color: var(--devui-text, #252b3a)
}

.devui-step.wait .devui-step__title {
    color: var(--devui-placeholder, #babbc0)
}

.devui-step.process .devui-step__dot {
    background-color: var(--devui-brand, #5e7ce0);
    color: var(--devui-light-text, #ffffff)
}

.devui-step.process .devui-step__title {
    color: var(--devui-brand, #5e7ce0)
}

.devui-step.finish .devui-step__dot {
    background-color: var(--devui-success, #50d4ab);
    color: var(--devui-light-text, #ffffff)
}

.devui-step.finish .devui-step__title {
    color: var(--devui-success, #50d4ab)
}

.devui-step.success .devui-step__dot {
    background-color: var(--devui-success, #50d4ab);
    color: var(--devui-light-text, #ffffff)
}

.devui-step.success .devui-step__title {
    color: var(--devui-success, #50d4ab)
}

.devui-step.error .devui-step__dot {
    background-color: var(--devui-danger, #f66f6a);
    color: var(--devui-light-text, #ffffff)
}

.devui-step.error .devui-step__title {
    color: var(--devui-danger, #f66f6a)
}

.devui-steps-guide {
    width: 400px;
    min-height: 160px;
    background: var(--devui-brand, #5e7ce0);
    box-shadow: var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;
    border-radius: var(--devui-border-radius-feedback, 4px);
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-light-text, #ffffff);
    padding: 20px;
    position: absolute
}

.devui-steps-guide .devui-steps-guide__title {
    font-size: var(--devui-font-size-page-title, 16px);
    opacity: 1;
    margin: 0 0 20px;
    padding: 0
}

.devui-steps-guide>.devui-steps-guide__arrow,.devui-steps-guide>.devui-steps-guide__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.devui-steps-guide>.devui-steps-guide__arrow {
    border-width: 8px
}

.devui-steps-guide.left>.devui-steps-guide__arrow {
    top: 23px;
    right: -6px;
    margin-top: -3px;
    border-right-width: 0;
    transform: rotate(-135deg);
    border-left-color: var(--devui-brand, #5e7ce0)
}

.devui-steps-guide.top>.devui-steps-guide__arrow,.devui-steps-guide.top-left>.devui-steps-guide__arrow,.devui-steps-guide.top-right>.devui-steps-guide__arrow {
    bottom: -6px;
    border-bottom-width: 0;
    border-top-color: var(--devui-brand, #5e7ce0);
    transform: rotate(135deg)
}

.devui-steps-guide.top>.devui-steps-guide__arrow {
    left: calc(50% - 4px)
}

.devui-steps-guide.top-left>.devui-steps-guide__arrow {
    left: 23px
}

.devui-steps-guide.top-right>.devui-steps-guide__arrow {
    right: 23px;
    transform: rotate(-135deg)
}

.devui-steps-guide.right>.devui-steps-guide__arrow {
    top: 23px;
    left: -6px;
    margin-top: -3px;
    border-left-width: 0;
    transform: rotate(135deg);
    border-right-color: var(--devui-brand, #5e7ce0)
}

.devui-steps-guide.bottom>.devui-steps-guide__arrow,.devui-steps-guide.bottom-left>.devui-steps-guide__arrow,.devui-steps-guide.bottom-right>.devui-steps-guide__arrow {
    top: -6px;
    margin-left: 3px;
    border-top-width: 0;
    border-bottom-color: var(--devui-brand, #5e7ce0)
}

.devui-steps-guide.bottom>.devui-steps-guide__arrow {
    left: calc(50% - 4px);
    transform: rotate(-135deg)
}

.devui-steps-guide.bottom-right>.devui-steps-guide__arrow {
    right: 23px;
    transform: rotate(135deg)
}

.devui-steps-guide.bottom-left>.devui-steps-guide__arrow {
    left: 23px;
    transform: rotate(-135deg)
}

.devui-steps-guide>.devui-steps-guide__shining-dot,.devui-steps-guide .devui-steps-guide__shining-plus {
    position: absolute;
    background: var(--devui-brand, #5e7ce0);
    width: 6px;
    height: 6px;
    border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-steps-guide.left>.devui-steps-guide__shining-dot,.devui-steps-guide.left>.devui-steps-guide__shining-plus {
    top: 21px;
    right: -30px
}

.devui-steps-guide.right>.devui-steps-guide__shining-dot,.devui-steps-guide.right>.devui-steps-guide__shining-plus {
    top: 21px;
    left: -30px
}

.devui-steps-guide.top>.devui-steps-guide__shining-dot,.devui-steps-guide.top>.devui-steps-guide__shining-plus {
    left: calc(50% - 3px);
    bottom: -30px
}

.devui-steps-guide.top-left>.devui-steps-guide__shining-dot,.devui-steps-guide.top-left>.devui-steps-guide__shining-plus {
    left: 21px;
    bottom: -30px
}

.devui-steps-guide.top-right>.devui-steps-guide__shining-dot,.devui-steps-guide.top-right>.devui-steps-guide__shining-plus {
    right: 21px;
    bottom: -30px
}

.devui-steps-guide.bottom>.devui-steps-guide__shining-dot,.devui-steps-guide.bottom>.devui-steps-guide__shining-plus {
    left: calc(50% - 3px);
    top: -30px
}

.devui-steps-guide.bottom-right>.devui-steps-guide__shining-dot,.devui-steps-guide.bottom-right>.devui-steps-guide__shining-plus {
    top: -30px;
    right: 21px
}

.devui-steps-guide.bottom-left>.devui-steps-guide__shining-dot,.devui-steps-guide.bottom-left>.devui-steps-guide__shining-plus {
    top: -30px;
    left: 21px
}

.devui-steps-guide .devui-steps-guide__shining-plus {
    animation: devui-glow 2s 0s infinite
}

.devui-steps-guide .devui-steps-guide__container {
    position: relative
}

.devui-steps-guide .devui-steps-guide__container>.icon-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl {
    display: flex;
    flex-wrap: wrap
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots {
    color: var(--devui-light-text, #ffffff);
    position: relative;
    top: 25px;
    font-size: var(--devui-font-size, 12px);
    height: 30px
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots>em {
    opacity: .2;
    margin: 0 5px 0 2px
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots>em.devui-steps-guide__active {
    opacity: 1
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    justify-content: flex-end;
    padding: 20px 0 0;
    white-space: nowrap
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn>div {
    color: var(--devui-light-text, #ffffff);
    background: #ffffff1a;
    border-radius: var(--devui-border-radius, 2px);
    padding: 5px 15px;
    cursor: pointer;
    margin-left: 10px
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn>div.devui-steps-guide__prev-step {
    background: none;
    border: solid 1px rgba(255,255,255,.1)
}

@keyframes devui-glow {
    0% {
        transform: scale(1);
        opacity: .5
    }

    25% {
        transform: scale(2);
        opacity: .3
    }

    50% {
        transform: scale(3);
        opacity: .1
    }

    75% {
        transform: scale(2);
        opacity: .3
    }

    to {
        transform: scale(1);
        opacity: .5
    }
}

:host {
    display: inline-block;
    font-size: 0;
    vertical-align: middle
}

.devui-switch {
    display: inline-flex;
    align-items: center;
    width: 44.8px;
    height: 32px
}

.devui-switch__wrapper {
    width: 100%;
    height: 62.5%;
    border-radius: var(--devui-border-radius-full, 100px);
    background: var(--devui-shape-icon-fill, #d7d8da);
    border: 1px solid var(--devui-line, #d7d8da);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: bottom;
    transition: var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all
}

.devui-switch__wrapper:not(.devui-switch--checked):hover {
    background-color: #bdbdbd;
    border-color: #bdbdbd
}

.devui-switch__wrapper:active {
    border-color: var(--devui-primary-hover, #7693f5)
}

.devui-switch__wrapper .devui-switch__inner-wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 14px;
    font-size: var(--devui-font-size, 12px);
    box-sizing: border-box
}

.devui-switch__wrapper .devui-switch__inner-wrapper .devui-switch__inner {
    color: var(--devui-light-text, #ffffff);
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden
}

.devui-switch__wrapper small {
    width: 16px;
    height: 16px;
    background: var(--devui-light-text, #ffffff);
    border-radius: var(--devui-border-radius-full, 100px);
    position: absolute;
    top: 1px;
    left: 1px;
    transition: var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all
}

.devui-switch__wrapper small.mouseDown {
    width: 19px
}

.devui-switch .devui-switch--checked .devui-switch__inner-wrapper {
    padding-left: unset;
    padding-right: 14px
}

.devui-switch .devui-switch--checked small {
    background: var(--devui-light-text, #ffffff);
    left: 26px
}

.devui-switch .devui-switch--checked small.mouseDown {
    left: 23px
}

.devui-switch--lg {
    width: 56px;
    height: 40px
}

.devui-switch--lg .devui-switch__wrapper {
    height: 64%
}

.devui-switch--lg .devui-switch__inner-wrapper {
    padding-left: 24px;
    font-size: var(--devui-font-size-modal-title, 18px)
}

.devui-switch--lg .devui-switch--checked .devui-switch__inner-wrapper {
    padding-left: unset;
    padding-right: 24px
}

.devui-switch--lg small {
    width: 22px;
    height: 22px
}

.devui-switch--lg small.mouseDown {
    width: 26px
}

.devui-switch--lg .devui-switch--checked small {
    background: var(--devui-light-text, #ffffff);
    left: 31px
}

.devui-switch--lg .devui-switch--checked small.mouseDown {
    left: 28px
}

.devui-switch--sm {
    width: 33.6px;
    height: 24px
}

.devui-switch--sm .devui-switch__wrapper {
    height: 66%
}

.devui-switch--sm .devui-switch__inner-wrapper {
    line-height: 1;
    padding-left: 12px;
    font-size: var(--devui-font-size-sm, 12px)
}

.devui-switch--sm .devui-switch--checked .devui-switch__inner-wrapper {
    padding-left: unset;
    padding-right: 18px
}

.devui-switch--sm small {
    width: 12px;
    height: 12px;
    position: absolute
}

.devui-switch--sm small.mouseDown {
    width: 14px
}

.devui-switch--sm .devui-switch--checked small {
    left: 19px
}

.devui-switch--sm .devui-switch--checked small.mouseDown {
    left: 17px
}

.devui-switch--checked {
    background: var(--devui-brand, #5e7ce0);
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-switch--checked:hover {
    background: var(--devui-primary-hover, #7693f5);
    border-color: var(--devui-primary-hover, #7693f5)
}

.devui-switch--checked:active {
    background: var(--devui-brand-active-focus, #344899);
    border-color: var(--devui-brand-active-focus, #344899)
}

.devui-switch>.devui-switch--disabled,.devui-switch>.devui-switch--disabled:hover,.devui-switch>.devui-switch--disabled:active,.devui-switch>.devui-switch--disabled.devui-switch--checked {
    cursor: not-allowed
}

.devui-switch>.devui-switch--disabled,.devui-switch>.devui-switch--disabled:hover,.devui-switch>.devui-switch--disabled:active {
    background-color: var(--devui-disabled-line, #dfe1e6);
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-switch>.devui-switch--disabled small,.devui-switch>.devui-switch--disabled:hover small,.devui-switch>.devui-switch--disabled:active small {
    background-color: var(--devui-unavailable, #f5f5f5)
}

.devui-switch>.devui-switch--disabled.devui-switch--checked {
    background-color: var(--devui-icon-fill-active-disabled, #beccfa);
    border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-switch>.devui-switch--disabled.devui-switch--checked small {
    background-color: var(--devui-light-text, #ffffff)
}

.devui-table__sort-clickable {
    flex: 1;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
    margin-right: 4px;
    vertical-align: -.55em;
    cursor: pointer
}

.devui-table__sort-default>svg g use {
    fill: var(--devui-dividing-line, #f2f2f3)
}

.devui-table__sort-default>svg g polygon {
    fill: var(--devui-icon-bg, #ffffff)
}

.devui-table__sort-default:hover>svg g use {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__sort-asc>svg g use,.devui-table__sort-desc>svg g use {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__sort-asc>svg g polygon,.devui-table__sort-desc>svg g polygon {
    fill: var(--devui-icon-bg, #ffffff)
}

.devui-table__sort-asc:hover>svg g use,.devui-table__sort-desc:hover>svg g use {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__sort-asc>svg g polygon:last-of-type {
    opacity: .3
}

.devui-table__sort-desc>svg g polygon:first-of-type {
    opacity: .3
}

.filter-wrapper {
    width: 200px;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    border-radius: var(--devui-border-radius, 2px)
}

.filter-wrapper .filter-all-check {
    padding: 0 8px 4px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.filter-wrapper .filter-multiple-menu {
    width: 100%;
    padding: 4px 8px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.filter-wrapper .filter-operation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    height: 26px
}

.filter-wrapper .filter-single-menu {
    width: 100%
}

.filter-wrapper .filter-item {
    display: flex;
    align-items: center;
    height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.filter-icon {
    flex: 1;
    display: block;
    height: 16px;
    text-align: right;
    cursor: pointer
}

.filter-icon>svg g {
    fill: var(--devui-dividing-line, #f2f2f3)
}

.filter-icon:hover>svg g {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.filter-item-active {
    background: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.filter-icon-active {
    visibility: visible!important
}

.filter-icon-active>svg g {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.filter-icon-active:hover>svg g {
    fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__thead tr {
    border: none;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-table__thead tr th {
    display: table-cell;
    text-align: left;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--devui-line, #d7d8da);
    background-color: inherit
}

.devui-table__thead tr th.is-left {
    text-align: left
}

.devui-table__thead tr th.is-center {
    text-align: center
}

.devui-table__thead tr th.is-right {
    text-align: right
}

.devui-table__thead tr .operable:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-table__thead tr .resizeable:hover .resize-handle {
    border-right: 1px solid var(--devui-line, #d7d8da)
}

.devui-table__thead tr .resizeable .resize-handle:hover {
    border-right: 2px solid var(--devui-form-control-line-active, #5e7ce0)
}

.devui-table__thead tr .sort-active,.devui-table__thead tr .filter-active {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-table__thead .header-container {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 8px
}

.devui-table__thead .header-container .title {
    display: inline-block;
    max-width: calc(100% - 18px);
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text, #252b3a);
    font-weight: 700;
    line-height: 36px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.devui-table__thead .header-container .resize-handle {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize
}

.devui-table__thead .header-container .resize-overlay {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000
}

.devui-table__thead .devui-table__checkable-cell .header-container {
    padding-left: 0
}

.devui-table--header-bg thead.devui-table__thead tr {
    background: var(--devui-list-item-hover-bg, #f2f5fc)
}

.devui-table__tbody tr {
    font-size: var(--devui-font-size, 12px);
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-base-bg, #ffffff);
    border: none
}

.devui-table__tbody tr.hover-enabled:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-table__tbody tr.hover-enabled:hover .devui-table--last-sticky-left {
    background: linear-gradient(to left,transparent,var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-table__tbody tr.hover-enabled:hover .devui-table--first-sticky-right {
    background: linear-gradient(to right,transparent,var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-table__tbody tr td .icon-expand-row:hover {
    cursor: pointer
}

.devui-table__tbody tr.expanded td .icon-expand-row {
    transform: rotate(45deg)
}

.devui-table__tbody tr td {
    background-clip: padding-box;
    background-color: inherit;
    vertical-align: middle;
    line-height: 24px;
    border: none;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table__tbody tr td.is-left {
    text-align: left
}

.devui-table__tbody tr td.is-center {
    text-align: center
}

.devui-table__tbody tr td.is-right {
    text-align: right
}

.devui-table__tbody tr td .editable-cell {
    position: relative;
    margin-left: -8px;
    padding-left: 8px;
    cursor: pointer
}

.devui-table__tbody tr td .editable-cell:hover:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid var(--devui-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    pointer-events: none
}

.devui-table__tbody tr td .devui-table__cell {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-table__tbody tr td .devui-table__cell .cell-text {
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis
}

.devui-table__tbody .is-hidden {
    display: none
}

.devui-table__lazy__flag {
    width: 0;
    height: 0
}

.devui-table--sticky-cell {
    position: sticky;
    z-index: 5
}

.devui-table--scroll-middle .devui-table--last-sticky-left,.devui-table--scroll-right .devui-table--last-sticky-left {
    background: linear-gradient(to left,transparent,var(--devui-base-bg, #ffffff) 10px)
}

.devui-table--scroll-middle .devui-table--last-sticky-left:after,.devui-table--scroll-right .devui-table--last-sticky-left:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    box-shadow: inset var(--devui-table-inset-shadow-left, 8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-table--scroll-middle .devui-table--first-sticky-right,.devui-table--scroll-left .devui-table--first-sticky-right {
    background: linear-gradient(to right,transparent,var(--devui-base-bg, #ffffff) 10px)
}

.devui-table--scroll-middle .devui-table--first-sticky-right:before,.devui-table--scroll-left .devui-table--first-sticky-right:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    box-shadow: inset var(--devui-table-inset-shadow-right, -8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-table {
    position: relative;
    display: flex;
    width: 100%;
    overflow-x: auto
}

.devui-table .hidden-columns {
    position: absolute;
    visibility: hidden;
    z-index: -1
}

.devui-table__container {
    flex: 1;
    overflow: auto
}

.devui-table__view {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0
}

.devui-table--striped tbody tr:nth-child(2n) {
    background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-table__empty {
    padding: 40px 0;
    background-color: var(--devui-base-bg, #ffffff)
}

.devui-table__fix-header {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: auto
}

.devui-table__fix-header>.devui-table__header-wrapper {
    position: sticky;
    top: 0;
    z-index: 10
}

.devui-table__scroll-view {
    flex: 1
}

.devui-table--layout-auto {
    table-layout: auto
}

.devui-table--sm tbody>tr>td {
    font-size: var(--devui-font-size-sm, 12px);
    padding: 7px 20px 8px
}

.devui-table--sm tbody>tr>td.devui-table__checkable-cell {
    padding: 8px
}

.devui-table--sm thead>tr>th.devui-table__checkable-cell {
    padding: 8px
}

.devui-table--md tbody>tr>td {
    font-size: var(--devui-font-size-md, 12px);
    padding: 11px 20px 12px
}

.devui-table--md thead>tr>th.devui-table__checkable-cell {
    padding: 8px 20px
}

.devui-table--lg tbody>tr>td {
    font-size: var(--devui-font-size-lg, 14px);
    padding: 15px 20px 16px
}

.devui-table--lg thead>tr>th.devui-table__checkable-cell {
    padding: 8px 20px
}

.devui-table--borderless tbody>tr>td {
    border-bottom: none
}

.devui-table--bordered tr {
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered tr td {
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered thead tr th:first-child {
    border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered thead tr th {
    border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
    border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table .resize-bar {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--devui-form-control-line-active, #5e7ce0);
    z-index: var(--devui-z-index-function-widget, 999);
    cursor: col-resize
}

.table-selector {
    -webkit-user-select: none;
    user-select: none;
    cursor: col-resize
}

.devui-table__tbody tr .devui-table__tree-operate {
    padding-right: 8px;
    cursor: pointer
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon rect {
    stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon path {
    fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon.svg-icon-close rect:last-child {
    fill: var(--devui-disabled-text, #cfd0d3);
    stroke: none
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon rect {
    stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon path {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon.svg-icon-close rect:last-child {
    fill: var(--devui-icon-fill-active, #252b3a);
    stroke: none
}

.devui-table__tbody tr .devui-table__tree-operate .svg-icon {
    transform: translateY(20%)
}

:host {
    display: block;
    outline: none
}

.devui-tag-input {
    position: relative;
    height: 100%;
    outline: none
}

.devui-tag-input:active {
    outline: 0
}

.devui-tag-input .is-disabled {
    border-color: var(--devui-disabled-line, #dfe1e6);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-tag-input .is-disabled .devui-tag-input__tags {
    min-height: 22px
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item span {
    margin-right: 0
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item .remove-button {
    background-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item .remove-button svg path {
    fill: var(--devui-light-text, #ffffff)
}

.devui-tag-input__tags__wrapper {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    padding: 2px 4px;
    overflow: hidden;
    word-wrap: break-word;
    cursor: text;
    background-color: var(--devui-base-bg, #ffffff);
    border: 1px solid var(--devui-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    height: 100%;
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-tag-input__tags__wrapper:hover {
    border-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tag-input__tags__wrapper:focus-within {
    border-color: var(--devui-brand, #5e7ce0)
}

.devui-tag-input__tags__wrapper.focused {
    outline: 0
}

.devui-tag-input__tags {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.devui-tag-input__tags__item {
    margin: 1px;
    padding: 0 10px;
    display: inline-block;
    min-height: 18px;
    line-height: 18px;
    border-radius: var(--devui-border-radius, 2px);
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-label-bg, #e9edfa);
    position: relative;
    border: 1px solid var(--devui-label-bg, #e9edfa)
}

.devui-tag-input__tags__item span {
    line-height: 1.5;
    margin-right: 25px
}

.devui-tag-input__tags__item .remove-button {
    margin: 0 0 0 12px;
    padding: 0;
    border: none;
    vertical-align: top;
    font-size: var(--devui-font-size-page-title, 16px);
    border-radius: 50%;
    background-color: var(--devui-line, #d7d8da);
    width: 12px;
    height: 12px;
    display: inline-block;
    line-height: 12px;
    text-align: center;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 10px
}

.devui-tag-input__tags__item .remove-button svg path {
    fill: var(--devui-light-text, #ffffff)
}

.devui-tag-input__tags__item .remove-button:hover {
    text-decoration: none
}

.devui-tag-input__tags__item:not(.is-disabled) {
    cursor: pointer
}

.devui-tag-input__tags__item:not(.is-disabled) span:hover {
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-tag-input__tags__item:not(.is-disabled) .remove-button:hover {
    background-color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-tag-input__input {
    border: 0;
    outline: 0;
    float: left;
    width: 100%;
    height: 22px;
    font-size: var(--devui-font-size, 12px);
    padding-left: 5px
}

.devui-tag-input__input::-ms-clear {
    display: none
}

.devui-tag-input__input_hide {
    display: none
}

.devui-tag-input__suggestion-list {
    position: relative;
    width: 100%;
    max-height: 280px;
    padding: 8px;
    margin: 0;
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    list-style-type: none;
    overflow-y: auto
}

.devui-tag-input__suggestion-list__item {
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px);
    line-height: 20px;
    border-radius: var(--devui-border-radius, 2px);
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
    cursor: pointer
}

.devui-tag-input__suggestion-list__item:hover {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tag-input__suggestion-list__item.selected {
    color: var(--devui-brand, #5e7ce0);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-tag-input__suggestion-list__no-data {
    color: var(--devui-disabled-text, #adb0b8);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-time-popup--btn {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.devui-time-picker {
    width: 200px
}

.devui-time-picker .time-input-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.devui-time-picker .clear-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px
}

.devui-time-picker--fade-bottom-enter-from,.devui-time-picker--fade-bottom-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
}

.devui-time-picker--fade-bottom-enter-to,.devui-time-picker--fade-bottom-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-time-picker--fade-bottom-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-time-picker--fade-bottom-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-time-picker--fade-top-enter-from,.devui-time-picker--fade-top-leave-to {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.devui-time-picker--fade-top-enter-to,.devui-time-picker--fade-top-leave-from {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.devui-time-picker--fade-top-enter-active {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.devui-time-picker--fade-top-leave-active {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.devui-timeline-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.devui-timeline-vertical .devui-timeline-item {
    display: flex;
    flex-direction: row;
    width: 100%
}

.devui-timeline-vertical .devui-timeline-item-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px
}

.devui-timeline-vertical .devui-timeline-item-line {
    position: relative;
    height: calc(100% - 18px);
    min-height: 20px;
    border-left-width: 2px;
    border-left-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-timeline-vertical .devui-timeline-item-line-extra {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.devui-timeline-vertical .devui-timeline-item-line:first-child {
    display: none
}

.devui-timeline-vertical .devui-timeline-item-data-left {
    text-align: end
}

.devui-timeline-vertical .devui-timeline-item-data-left,.devui-timeline-vertical .devui-timeline-item-data-right {
    margin-bottom: 24px;
    margin-top: -2px;
    flex: 1
}

.devui-timeline-vertical .devui-timeline-item-line-style-dashed {
    border-left-style: dashed
}

.devui-timeline-vertical .devui-timeline-item-line-style-solid {
    border-left-style: solid
}

.devui-timeline-vertical .devui-timeline-item-line-style-dotted {
    border-left-style: dotted
}

.devui-timeline-vertical .devui-timeline-item-line-style-none {
    border-left-style: none
}

.devui-timeline-vertical .devui-timeline-item .devui-timeline-middle-zone {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.devui-timeline-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative
}

.devui-timeline-horizontal-center .devui-timeline-item-data-top,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom {
    text-align: center;
    padding: 0 6px
}

.devui-timeline-horizontal-center .devui-timeline-item-data-top>div,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom>div {
    transform: translate(-50%)
}

.devui-timeline-horizontal .devui-timeline-item {
    display: flex;
    flex-direction: column;
    height: 100%
}

.devui-timeline-horizontal .devui-timeline-item-axis {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0
}

.devui-timeline-horizontal .devui-timeline-item-line {
    position: relative;
    min-width: 60px;
    width: calc(100% - 18px);
    border-bottom-width: 2px;
    border-bottom-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-timeline-horizontal .devui-timeline-item-line-extra {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.devui-timeline-horizontal .devui-timeline-item:first-child .devui-timeline-item-line:first-child {
    opacity: 0
}

.devui-timeline-horizontal .devui-timeline-item-data-top,.devui-timeline-horizontal .devui-timeline-item-data-bottom {
    padding-right: 12px;
    flex: 1
}

.devui-timeline-horizontal .devui-timeline-item-line-style-dashed {
    border-bottom-style: dashed
}

.devui-timeline-horizontal .devui-timeline-item-line-style-solid {
    border-bottom-style: solid
}

.devui-timeline-horizontal .devui-timeline-item-line-style-dotted {
    border-bottom-style: dotted
}

.devui-timeline-horizontal .devui-timeline-item-line-style-none {
    border-bottom-style: none
}

.devui-timeline-horizontal .devui-timeline-item .devui-timeline-middle-zone {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.devui-timeline-item-dot,.devui-timeline-item-dot>svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.devui-timeline-item-dot>i {
    font-size: 18px;
    vertical-align: 0
}

.devui-timeline-item-type-primary {
    border: 2px solid var(--devui-placeholder, #babbc0);
    border-radius: 50%
}

.devui-timeline-item-type-success i {
    color: var(--devui-success, #50d4ab)
}

.devui-timeline-item-type-error i {
    color: var(--devui-danger, #f66f6a)
}

.devui-timeline-item-type-warning i {
    color: var(--devui-warning, #fac20a)
}

.devui-timeline-item-type-running {
    line-height: 16px;
    text-align: center;
    animation: devui-timeline-running 1.5s linear infinite;
    border: 2px solid var(--devui-success, #50d4ab);
    border-radius: 50%
}

@keyframes devui-timeline-running {
    0% {
        transform: rotate(0);
        color: var(--devui-success, #50d4ab);
        border-color: var(--devui-success, #50d4ab)
    }

    50% {
        transform: rotate(180deg);
        color: var(--devui-success, #50d4ab);
        border-color: var(--devui-success, #50d4ab)
    }

    to {
        transform: rotate(360deg);
        color: var(--devui-success, #50d4ab);
        border-color: var(--devui-success, #50d4ab)
    }
}

.devui-transfer {
    display: flex
}

.devui-transfer__panel {
    width: 300px;
    border: 1px solid var(--devui-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px)
}

.devui-transfer__panel--header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
    padding: 0 16px
}

.devui-transfer__panel--header-allChecked {
    display: flex
}

.devui-transfer__panel--header-num {
    color: var(--devui-aide-text, #71757f)
}

.devui-transfer__panel--header-num-unit {
    margin-left: 4px
}

.devui-transfer__panel--body {
    display: flex;
    flex-direction: column;
    height: 100%
}

.devui-transfer__panel--body-search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 7px 16px 0
}

.devui-transfer__panel--body-search .devui-search {
    width: 100%
}

.devui-transfer__panel--body-search .devui-input__inner {
    padding: 5px 0
}

.devui-transfer__panel--body-list {
    overflow: auto;
    padding-top: 8px;
    width: 100%
}

.devui-transfer__panel--body-list-group>div>div {
    padding: 0 16px;
    cursor: pointer
}

.devui-transfer__panel--body-list-item {
    display: flex;
    align-items: center;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 4px 0;
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    font-size: var(--devui-font-size, 12px)
}

.devui-transfer__panel--body-list-item .icon-drag-small {
    cursor: move;
    padding: 0 1px;
    visibility: hidden
}

.devui-transfer__panel--body-list-item:hover .icon-drag-small {
    visibility: visible
}

.devui-transfer__panel--body-list-drag-dragging {
    background-color: var(--devui-brand-foil, #f2f2f3)!important
}

.devui-transfer__panel--body-list-drag-over {
    background-color: var(--devui-brand-hover, #7693f5)
}

.devui-transfer__panel--body-list-drag-over-top {
    border-top-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer__panel--body-list-drag-over-bottom {
    border-bottom-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer__panel--body-list-drag:hover .devui-transfer__panel-body-list-drag__icon {
    visibility: visible
}

.devui-transfer__panel--body-list-tooltip .slotElement {
    display: flex
}

.devui-transfer__panel--body-list-empty {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-transfer__panel--body-nodrag {
    padding: 0 20px
}

.devui-transfer__operate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 12px
}

.devui-transfer__operate--group {
    display: flex;
    flex-direction: column
}

.devui-transfer__operate--group .devui-button__icon.devui-button--circle.devui-button--lg {
    width: 36px;
    height: 36px
}

.devui-transfer__operate--group-right {
    margin-top: 20px
}

.devui-transfer-drag-dragging {
    background-color: var(--devui-brand-foil, #f2f2f3)
}

.devui-transfer .transfer-checkbox {
    height: 36px;
    line-height: 36px;
    font-size: var(--devui-font-size, 12px)
}

.devui-transfer–drag-over-top {
    border-top-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer–drag-over-bottom {
    border-bottom-color: var(--devui-brand-active, #526ecc)
}

.transfer-checkbox .devui-checkbox label {
    display: flex;
    width: 100%!important
}

.transfer-checkbox .devui-checkbox label .devui-checkbox__material {
    flex-shrink: 0
}

.devui-text-ellipsis,.devui-tree__node .devui-tree__node-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.devui-tree-indicator {
    height: 1px;
    background-color: var(--devui-brand, #5e7ce0);
    position: absolute
}

.devui-tree__node {
    height: 30px;
    color: var(--devui-text-weak, #575d6c);
    line-height: 1.5;
    white-space: nowrap;
    position: relative
}

.devui-tree__node--drop-inner .devui-tree__node--drop-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node--drop-inner .devui-tree__node--drop-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node--drop-inner .devui-tree__node--drop-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node--drop-inner .devui-tree__node--drop-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node--drop-prev .devui-tree__node--drop-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node--drop-next:before .devui-tree__node--drop-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node .devui-tree__node-content {
    display: inline-flex;
    align-items: center;
    font-size: var(--devui-font-size, 12px);
    padding-right: 10px;
    width: 100%;
    border-radius: var(--devui-border-radius, 2px);
    padding-left: 6px;
    cursor: pointer
}

.devui-tree__node .devui-tree__node-content.active {
    background-color: var(--devui-list-item-selected-bg, #f2f5fc);
    text-decoration: none;
    border-color: transparent
}

.devui-tree__node .devui-tree__node-content:not(.active):hover {
    transition: background-color .5s;
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tree__node .devui-tree__node-content--value-wrapper {
    display: inline-flex;
    align-items: center;
    height: 30px;
    overflow: hidden
}

.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading {
    margin-left: 50px
}

.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading .devui-loading-area {
    background: none
}

.devui-tree__node .devui-tree-node__children {
    padding-left: 10px
}

.devui-tree__node .devui-tree-node__children:first-child {
    border-left-color: transparent
}

.devui-tree__node .devui-tree-node__children .devui-tree__node {
    margin-left: 8px;
    content: "";
    position: relative
}

.devui-tree__node .devui-tree-node__children .devui-tree__node:last-child {
    border-left-color: transparent
}

.devui-tree__node .devui-tree__node-title {
    margin-left: 5px;
    display: inline-block;
    border: 1px dashed transparent;
    border-radius: var(--devui-border-radius, 2px);
    max-width: 100%;
    flex: 1
}

.devui-tree__node .devui-tree__node-title:not(.disabled) {
    cursor: pointer
}

.devui-tree__node .devui-tree__node-title .devui-tree__match-highlight {
    font-weight: 700;
    color: var(--devui-brand, #5e7ce0)
}

.devui-tree__node .devui-tree-node__edit {
    margin-left: .4em;
    padding: .1em
}

.devui-tree__node .devui-tree-node__edit>.devui-input-sm {
    height: 26px
}

.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error,.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:hover,.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:focus {
    border-color: var(--devui-danger, #f66f6a)
}

.devui-tree__node .devui-tree-node__leaf:not(.disabled) {
    cursor: default
}

.devui-tree__node .devui-tree-node__leaf .devui-tree-node__leaf--default {
    color: #f2a71f
}

.devui-tree__node .devui-tree-node__leaf .devui-leaf-icon-none {
    display: inline-block;
    width: 16px;
    height: 16px
}

.devui-tree__node .devui-tree__node-folder {
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--devui-font-size-icon, 16px);
    height: 16px;
    line-height: 16px
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon {
    display: inline-block;
    height: 16px;
    line-height: 16px
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g path {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g rect {
    stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node .devui-tree__node-folder:not(.disabled) {
    cursor: pointer
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--default {
    color: #f2b806
}

.devui-tree__node-indent {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px
}

.devui-tree__node .devui-loading-children {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
    margin-top: .15em;
    color: var(--devui-info, #5e7ce0);
    font-style: italic;
    font-size: 1em;
    animation-name: devui-loading-children;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

@keyframes devui-loading-children {
    0% {
        color: #627fe1
    }

    12.5% {
        color: #627fe1
    }

    25% {
        color: #617fe1
    }

    37.5% {
        color: #617ee1
    }

    50% {
        color: #607ee0
    }

    62.5% {
        color: #607ee0
    }

    75% {
        color: #5f7de0
    }

    87.5% {
        color: #5e7ce0
    }

    to {
        color: #5e7ce0
    }
}

.devui-tree__node svg.svg-icon path {
    fill: var(--devui-icon-text, #71757f)
}

.devui-tree__node svg.svg-icon rect {
    stroke: var(--devui-icon-text, #71757f)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon path {
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon rect {
    stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon.svg-icon-close rect:last-child {
    stroke: none;
    fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node svg.svg-icon.svg-icon-close rect:last-child {
    stroke: none;
    fill: var(--devui-icon-text, #71757f)
}

::ng-deep .devui-tree-mask {
    background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tree__node.devui-tree-without-virtual-scroll.devui-tree__node--open>.devui-tree__node-content {
    position: relative
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children {
    position: relative
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children:before {
    content: "";
    width: 1px;
    height: calc(100% - 15px);
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute;
    left: 9px;
    top: 0
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content {
    position: relative
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content:before {
    content: "";
    width: 8px;
    height: 1px;
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute;
    left: -9px;
    top: 50%
}

.devui-tree-vertical-line {
    width: 1px;
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute
}

.devui-tree-horizontal-line {
    height: 1px;
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute;
    top: 50%;
    margin-left: -16px
}

.toggle-disabled {
    cursor: not-allowed!important
}

.toggle-disabled svg.svg-icon rect {
    stroke: var(--devui-disabled-text, #cfd0d3)!important
}

.toggle-disabled svg.svg-icon.svg-icon-close rect:last-child {
    stroke: none!important;
    fill: var(--devui-disabled-text, #cfd0d3)!important
}

.toggle-disabled svg.svg-icon path {
    fill: var(--devui-disabled-text, #cfd0d3)!important
}

.select-disabled {
    color: var(--devui-disabled-text, #cfd0d3)!important;
    cursor: not-allowed!important;
    background-color: transparent!important
}

.devui-tree__node {
    font-size: 0
}

.devui-tree__node,.devui-tree__node-content {
    position: relative
}

.devui-tree__node-vline {
    width: 1px;
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute
}

.devui-tree__node-hline {
    width: 9px;
    height: 1px;
    background-color: var(--devui-dividing-line, #f2f2f3);
    position: absolute;
    left: -15px;
    top: 50%
}

.devui-tree__node-operation-area,.devui-tree__node-operation-area .devui-icon__container {
    margin-left: 8px
}

.devui-tree__node-operation-area .devui-icon__container:first-child {
    margin-left: 0
}

.devui-tree__node-operation-area .devui-icon__container:hover {
    cursor: pointer
}

.devui-tree--list-enter-active,.devui-tree--list-leave-active {
    transition: opacity .3s cubic-bezier(.5,.05,.5,.95),height .3s cubic-bezier(.5,.05,.5,.95)
}

.devui-tree--list-enter-from,.devui-tree--list-leave-to {
    opacity: 0;
    height: 0
}

.devui-tree-select {
    position: relative;
    width: 100%
}

.devui-tree-select-disabled,.devui-tree-select-disabled .devui-tree-select-input {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-tree-select-disabled .devui-tree-select-arrow {
    cursor: not-allowed;
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-tree-select-open .devui-tree-select-arrow {
    transform: rotate3d(0,0,1,180deg)
}

.devui-tree-select-input {
    cursor: pointer;
    width: 100%;
    height: 28px;
    padding: 0 10px;
    color: var(--devui-text, #252b3a);
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    outline: none;
    background-color: var(--devui-base-bg, #ffffff);
    overflow: auto
}

.devui-tree-select-input:empty:before {
    color: #d3d3d3;
    content: attr(placeholder);
    vertical-align: middle
}

.devui-tree-select-value {
    display: inline-block;
    height: 80%;
    vertical-align: middle
}

.devui-tree-select-value-enableLabelization {
    padding: 0 10px;
    margin: 2px 10px 2px 0;
    background-color: var(--devui-icon-fill, #71757f)
}

.devui-tree-select-dropdown {
    border-radius: var(--devui-border-radius, 2px);
    background: var(--devui-base-bg, #ffffff);
    box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-tree-select-dropdown-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0;
    margin: 0
}

.devui-tree-select-item {
    font-size: 16px;
    display: inline-flex;
    min-height: 36px;
    line-height: 1.5;
    width: 100%;
    padding: 10px;
    clear: both;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 0;
    color: var(--devui-text, #252b3a);
    cursor: pointer;
    align-items: center
}

.devui-tree-select-item:hover:not(.active):not(.disabled) {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tree-select-clearable {
    position: relative
}

.devui-tree-select-clearable:hover .devui-tree-select-clear {
    display: inline-flex
}

.devui-tree-select-clearable:hover .devui-tree-select-arrow {
    display: none
}

.devui-tree-select-notclearable {
    position: relative
}

.devui-tree-select-clear,.devui-tree-select-arrow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.devui-tree-select-clear {
    display: none
}

.devui-tree-select-clear:hover {
    cursor: pointer;
    color: var(--devui-icon-fill-active, #252b3a)
}

.devui-input-group {
    position: relative;
    display: flex!important;
    align-items: center;
    border-collapse: separate;
    width: 360px
}

.devui-input-group:not(.disabled):hover .devui-input-group-addon {
    border-color: var(--devui-form-control-line-active, #5e7ce0);
    background-color: var(--devui-dividing-line, #f2f2f3);
    font-weight: 700
}

.devui-input-group:not(.disabled):hover .devui-form-control {
    border-color: var(--devui-form-control-line-active, #5e7ce0);
    border-right-color: var(--devui-form-control-line, #d7d8da)
}

.devui-input-group:not(.disabled) .devui-input-group-addon:active {
    border-color: var(--devui-form-control-line-active, #5e7ce0);
    border-right-color: var(--devui-form-control-line, #d7d8da);
    background-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-input-group .devui-input-group-addon {
    width: 36px;
    white-space: nowrap;
    font-size: var(--devui-font-size-icon, 16px);
    font-weight: 400;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-area, #f5f5f5);
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;
    transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    cursor: pointer;
    align-self: normal;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.devui-input-group .devui-form-control {
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 4px 8px;
    font-size: var(--devui-font-size, 12px);
    line-height: 32px;
    background-image: none;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);
    border-right: none;
    transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-input-group .devui-form-control.devui-upload__files-list {
    max-height: 52px;
    padding: 0 3px;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
    margin: 0
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-item {
    height: 26px;
    line-height: 26px;
    padding: 0 48px 0 12px;
    margin-right: 2px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag {
    position: relative;
    background-color: var(--devui-label-bg, #e9edfa);
    border-radius: var(--devui-border-radius, 2px);
    max-width: 100%
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .devui-upload__filename {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon {
    position: absolute;
    cursor: pointer;
    right: 8px;
    top: 50%;
    transform: translateY(-50%)
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.icon-right {
    color: var(--devui-success, #50d4ab)
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.icon-running {
    font-size: 16px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.devui-upload__delete-file-button {
    margin-right: 20px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.devui-upload__delete,.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .devui-upload__progress,.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .icon-right {
    display: none
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .icon-close {
    display: inline-block
}

.devui-input-group.disabled .devui-upload__placeholder {
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-input-group .devui-upload__placeholder {
    max-height: 32px;
    line-height: 22px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--devui-placeholder, #babbc0)
}

.devui-input-group .devui-upload__progress {
    width: 16px;
    height: 16px
}

.devui-input-group.disabled .devui-form-control,.devui-input-group.disabled .devui-input-group-addon {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-form-control {
    outline: none
}

.devui-input-group.disabled .devui-upload__delete-file-button {
    cursor: not-allowed;
    pointer-events: none
}

.devui-loading {
    color: var(--devui-aide-text, #71757f)
}

.devui-upload--failed-color {
    color: var(--devui-danger, #f66f6a)
}

.devui-upload {
    display: flex
}

.devui-upload-tip {
    height: 18px;
    margin-top: 8px;
    font-size: 12px
}

.devui-upload-tip .icon {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle
}

.devui-upload-tip .icon-right-o {
    color: var(--devui-success, #50d4ab)
}

.devui-upload-tip .devui-upload-failed {
    color: var(--devui-danger, #f66f6a)
}

.devui-upload-tip a {
    color: var(--devui-link, #526ecc);
    cursor: pointer
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--devui-line, #d7d8da)
}

pre {
    font-family: monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.5;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

body {
    margin: 0;
    padding: 0;
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px);
    font-family: HuaweiFont,Helvetica,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Microsoft JhengHei;
    line-height: var(--devui-line-height-base, 1.5)
}

*,*:before,*:after {
    box-sizing: border-box
}

button {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: button
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: inherit
}

ul,ol {
    list-style: none;
    margin: 0;
    padding: 0
}

p {
    margin: 0;
    padding: 0
}

a,a:hover,a:focus,a:active,a:visited {
    text-decoration: none
}

:-ms-input-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

::-moz-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

::-webkit-input-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

.devui-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.devui-scrollbar::-webkit-scrollbar-track {
    background-color: transparent
}

.devui-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--devui-line, #d7d8da)
}

.devui-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--devui-placeholder, #babbc0)
}

body>* ::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

body>* ::-webkit-scrollbar-track {
    background-color: transparent
}

body>* ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--devui-line, #d7d8da)
}

body>* ::-webkit-scrollbar-thumb:hover {
    background-color: var(--devui-placeholder, #babbc0)
}

body>* ::-webkit-scrollbar-corner {
    background-color: transparent
}

.over-flow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.clear-fix {
    zoom:1}

.clear-fix:after {
    content: "";
    display: block;
    width: 0;
    clear: both
}

.devui-close {
    float: right;
    font-weight: 700;
    line-height: 20px;
    height: 20px;
    color: var(--devui-text, #252b3a);
    text-shadow: 0 1px 0 #ffffff;
    filter: alpha(opacity=20);
    opacity: .2
}

.devui-close:hover,.devui-close:focus {
    color: var(--devui-text, #252b3a);
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5
}

button.devui-close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0
}

a:hover,a:focus {
    color: var(--devui-link, #526ecc)
}

a:active,a:hover {
    outline: 0
}

.devui-link {
    color: var(--devui-link, #526ecc)
}

.devui-link:hover {
    color: var(--devui-link-active, #526ecc);
    text-decoration: underline;
    cursor: pointer
}

.devui-link-light {
    color: var(--devui-link-light, #96adfa)
}

.devui-link-light:hover {
    color: var(--devui-link-light-active, #beccfa);
    text-decoration: underline;
    cursor: pointer
}

.devui-disabled,.devui-disabled.devui-input-group-addon {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-disabled,.devui-disabled>input,.devui-disabled>.devui-input-group-addon {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-body-scrollblock {
    width: 100%
}

.mr-content-spacing {
    margin-right: 4px
}

.padding-element-spacing {
    padding: 16px!important
}

.ml-element-spacing {
    margin-left: 16px
}

.mr-element-spacing {
    margin-right: 16px
}

.mt-element-spacing {
    margin-top: 16px
}

.mb-element-spacing {
    margin-bottom: 16px
}

.mlr-element-spacing {
    margin-left: 16px;
    margin-right: 16px
}

.mtb-element-spacing {
    margin-top: 16px;
    margin-bottom: 16px
}

.m-element-spacing {
    margin: 16px
}

.grid {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    word-spacing: -.43em
}

.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24 {
    display: inline-block;
    *display: inline;
    zoom:1;letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top
}

.u-1 {
    display: block
}

.u-1-2 {
    width: 49.99999%
}

.u-1-3 {
    width: 33.33333%
}

.u-2-3 {
    width: 66.66666%
}

.u-1-4 {
    width: 24.99999%
}

.u-3-4 {
    width: 74.99999%
}

.u-1-5 {
    width: 19.99999%
}

.u-2-5 {
    width: 39.99999%
}

.u-3-5 {
    width: 59.99999%
}

.u-4-5 {
    width: 79.99999%
}

.u-1-6 {
    width: 16.64999%
}

.u-5-6 {
    width: 83.33333%
}

.u-1-8 {
    width: 12.49999%
}

.u-3-8 {
    width: 37.49999%
}

.u-5-8 {
    width: 62.49999%
}

.u-7-8 {
    width: 87.49999%
}

.u-1-12 {
    width: 8.33333%
}

.u-5-12 {
    width: 41.66666%
}

.u-7-12 {
    width: 58.33333%
}

.u-11-12 {
    width: 91.66666%
}

.u-1-24 {
    width: 4.16666%
}

.u-5-24 {
    width: 20.83333%
}

.u-7-24 {
    width: 29.16666%
}

.u-11-24 {
    width: 45.83333%
}

.u-13-24 {
    width: 54.16666%
}

.u-17-24 {
    width: 70.83333%
}

.u-19-24 {
    width: 79.16666%
}

.u-23-24 {
    width: 95.83333%
}

.u-content {
    padding: 0 0 10px 10px
}

.devui-dropdown {
    position: relative;
    vertical-align: middle
}

.devui-dropdown .devui-dropdown-toggle {
    box-shadow: none;
    outline: none
}

.devui-dropdown .devui-dropdown-toggle.devui-dropdown-default {
    line-height: 1.5;
    padding: 4px 10px;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    outline: 0;
    border-style: solid;
    border-width: 1px;
    display: flex;
    align-items: center
}

.devui-dropdown .devui-dropdown-toggle.devui-dropdown-default:not(.devui-dropdown-item) {
    display: inline-flex!important
}

.devui-dropdown .devui-caret {
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.devui-dropdown.devui-dropdown-open .devui-dropdown-toggle span.icon-chevron-down {
    transform: rotate(180deg)
}

.devui-dropdown-menu {
    position: absolute;
    float: left;
    top: calc(100% - 1px);
    left: 0;
    z-index: 1000;
    min-width: min(100%,102px);
    margin: 4px 0;
    padding-bottom: 5px;
    background-clip: padding-box;
    border-radius: 2px;
    list-style: none;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24));
    outline: none
}

.devui-dropdown-menu.devui-dropdown-overlay,.devui-dropdown-menu.devui-dropdown-overlay.popper-container {
    border: 1px solid var(--devui-brand, #5e7ce0)
}

.devui-dropdown-menu.devui-dropdown-overlay.popper-container {
    margin-top: -1px;
    margin-bottom: -1px
}

.devui-dropdown-menu>li {
    position: relative
}

.devui-dropdown-menu>li>a {
    height: 36px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center
}

.devui-dropdown-menu li>input {
    margin: 0 10px
}

.devui-dropdown-menu>.disabled>a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-dropdown-menu>.disabled>a:hover,.devui-dropdown-menu>.disabled>a:focus {
    cursor: not-allowed
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover:not(:active) {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled):active:hover {
    background-color: var(--devui-list-item-active-bg, #f2f5fc);
    color: var(--devui-list-item-active-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled).devui-dropdown-bg {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3);
    color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled).active {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    pointer-events: none
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback:hover {
    position: absolute
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback .devui-caret {
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.form-group.has-feedback[tabindex] {
    outline: 0
}

.devui-dropdown-no-border {
    min-height: 28px;
    min-width: min(100%,102px);
    line-height: 1.5;
    padding: 4px 10px;
    border-radius: 2px;
    text-align: center;
    outline: 0;
    background-image: none;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    color: var(--devui-text, #252b3a);
    display: flex;
    align-items: center;
    box-shadow: none;
    border: none
}

.devui-dropdown-no-border:hover,.devui-dropdown-no-border:focus {
    text-decoration: none
}

.devui-dropdown-no-border:active:hover,.devui-dropdown-no-border:focus {
    color: var(--devui-brand-active, #526ecc)
}

.devui-dropdown .devui-dropdown-default {
    background-color: var(--devui-base-bg, #ffffff);
    color: var(--devui-text, #252b3a);
    border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-dropdown .devui-dropdown-default:active,.devui-dropdown .devui-dropdown-default:focus,.devui-dropdown .devui-dropdown-default:hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-dropdown .devui-dropdown-menu {
    background: var(--devui-connected-overlay-bg, #ffffff);
    box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled) {
    color: var(--devui-text, #252b3a)
}

.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled):hover,.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled):focus {
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-dropdown .devui-dropdown-menu>.disabled>a {
    color: var(--devui-disabled-text, #cfd0d3);
    cursor: not-allowed
}

.devui-dropdown .devui-dropdown-menu>.disabled>a:hover,.devui-dropdown .devui-dropdown-menu>.disabled>a:focus {
    background-color: transparent
}

.devui-image-preview-container img {
    cursor: zoom-in
}

.devui-form-controls input[type=text],.devui-form-controls input[type=password],[dInput] {
    width: 100%;
    height: 28px;
    font-size: var(--devui-font-size, 12px)
}

.devui-form-controls input[type=text].devui-input-sm,.devui-form-controls input[type=password].devui-input-sm,[dInput].devui-input-sm {
    font-size: var(--devui-font-size-sm, 12px);
    height: 26px
}

.devui-form-controls input[type=text].devui-input-lg,.devui-form-controls input[type=password].devui-input-lg,[dInput].devui-input-lg {
    font-size: var(--devui-font-size-lg, 14px);
    height: 46px
}

[dTextArea] {
    width: 100%
}

.devui-form-controls textarea,[dInput],[dTextarea] {
    box-sizing: border-box;
    padding: 4px 10px;
    color: var(--devui-text, #252b3a);
    vertical-align: middle;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    outline: none;
    background-color: var(--devui-base-bg, #ffffff);
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-form-controls textarea[disabled],.devui-form-controls textarea[disabled]:hover,.devui-form-controls textarea.disabled,.devui-form-controls textarea.disabled:hover,.devui-form-controls textarea.devui-disabled,.devui-form-controls textarea.devui-disabled:hover,[dInput][disabled],[dInput][disabled]:hover,[dInput].disabled,[dInput].disabled:hover,[dInput].devui-disabled,[dInput].devui-disabled:hover,[dTextarea][disabled],[dTextarea][disabled]:hover,[dTextarea].disabled,[dTextarea].disabled:hover,[dTextarea].devui-disabled,[dTextarea].devui-disabled:hover {
    cursor: not-allowed;
    background-color: var(--devui-disabled-bg, #f5f5f5);
    border-color: var(--devui-disabled-line, #dfe1e6);
    color: var(--devui-disabled-text, #cfd0d3)
}

.devui-form-controls textarea,[dTextarea] {
    width: 100%
}

.devui-input-group {
    position: relative;
    display: table;
    border-collapse: separate
}

.devui-input-group-addon {
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: var(--devui-border-radius, 2px);
    display: table-cell;
    padding: 0 10px;
    text-align: center
}

.devui-input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0
}

.devui-input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

.devui-search-in-dropdown {
    margin: 0;
    border: none;
    padding: 5px 26px 5px 10px;
    background-color: var(--devui-embed-search-bg, #f2f2f3);
    color: var(--devui-text, #252b3a)
}

.devui-search-in-dropdown:-ms-input-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

.devui-search-in-dropdown:hover {
    background-color: var(--devui-embed-search-bg-hover, #eef0f5)
}

.devui-input-lg {
    font-size: var(--devui-font-size-page-title, 16px);
    line-height: 20px;
    height: 32px
}

.devui-input-sm {
    font-size: var(--devui-font-size, 12px);
    line-height: 14px;
    height: 26px
}

.devui-dropup,.devui-dropdown,.devui-form-group {
    position: relative
}

.devui-form-control {
    width: 100%;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-base-bg, #ffffff);
    display: block;
    border-radius: var(--devui-border-radius, 2px);
    outline: 0;
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

.devui-form-control[disabled],.devui-form-control[disabled]:hover,.devui-form-control[disabled]:focus,.devui-form-control.disabled,.devui-form-control.disabled:hover,.devui-form-control.disabled:focus,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:focus {
    border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-form-control[disabled],.devui-form-control[disabled]>input,.devui-form-control[disabled]:hover,.devui-form-control[disabled]:hover>input,.devui-form-control[disabled]:focus,.devui-form-control[disabled]:focus>input,.devui-form-control.disabled,.devui-form-control.disabled>input,.devui-form-control.disabled:hover,.devui-form-control.disabled:hover>input,.devui-form-control.disabled:focus,.devui-form-control.disabled:focus>input,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled>input,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:hover>input,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:focus>input {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.devui-form-control:hover {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-form-control:focus {
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border) {
    border-color: var(--devui-form-control-line, #d7d8da);
    transition: border-color .3s cubic-bezier(.645,.045,.355,1)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open) {
    border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within {
    outline: none;
    border-color: var(--devui-form-control-line-active, #5e7ce0)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open {
    outline: none;
    border-color: var(--devui-connected-overlay-line, #526ecc)
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) {
    min-height: 28px
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled) {
    color: var(--devui-text, #252b3a)
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control {
    height: 26px
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border) {
    border-radius: var(--devui-border-radius, 2px);
    border-width: 1px;
    border-style: solid
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus {
    border-color: transparent
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus {
    background-color: var(--devui-disabled-bg, #f5f5f5)
}

input::-moz-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

input:-ms-input-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

input::-webkit-input-placeholder {
    color: var(--devui-placeholder, #babbc0)
}

[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown {
    border-color: var(--devui-danger-line, #f66f6a)
}

d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled) {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled) {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled) {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete] {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input {
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input {
    border-color: var(--devui-danger-line, #f66f6a);
    background-color: var(--devui-danger-bg, #ffd5d4)
}

d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error {
    border-color: var(--devui-danger-line, #f66f6a)
}

d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar,d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container {
    border-color: var(--devui-danger-line, #f66f6a)
}

d-form-control d-search {
    width: 100%
}

.devui-form-controls.devui-form-control-has-suffix [dInput],.devui-form-controls.devui-form-control-has-suffix [dTextArea] {
    padding-right: 28px
}

.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea] {
    padding-right: 56px
}

.devui-form-controls.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-feedback [dTextarea] {
    padding-right: 28px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon {
    right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line {
    right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear {
    right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left {
    padding-right: 30px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input {
    padding-right: 54px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit {
    padding-right: 84px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm {
    right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm {
    right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm {
    padding-right: 54px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm {
    padding-right: 84px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg {
    right: 70px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg {
    right: 70px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg {
    padding-right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg {
    padding-right: 95px
}

.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input {
    padding-right: 48px
}

.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback {
    right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select {
    vertical-align: middle
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input {
    padding-right: 52px
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon {
    right: 34px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number {
    width: 100%
}

.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons {
    right: 32px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box {
    padding-right: 32px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled) {
    padding-right: 58px
}

.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags {
    padding-right: 28px
}

.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul {
    padding-right: 28px
}

.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback {
    right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control {
    padding-right: 48px
}

.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control {
    padding-right: 32px
}

.devui-font-size-base {
    font-size: var(--devui-font-size, 12px)
}

.devui-font-base {
    font-size: var(--devui-font-size, 12px);
    font-weight: var(--devui-font-content-weight, normal);
    line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-size-modal-title {
    font-size: var(--devui-font-size-modal-title, 18px)
}

.devui-font-modal-title {
    font-size: var(--devui-font-size-modal-title, 18px);
    font-weight: var(--devui-font-title-weight, bold);
    line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-size-page-title {
    font-size: var(--devui-font-size-page-title, 16px)
}

.devui-font-page-title {
    font-size: var(--devui-font-size-page-title, 16px);
    font-weight: var(--devui-font-title-weight, bold);
    line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-size-secondary-title {
    font-size: var(--devui-font-size-card-title, 14px)
}

.devui-font-secondary-title {
    font-size: var(--devui-font-size-card-title, 14px);
    font-weight: var(--devui-font-title-weight, bold);
    line-height: var(--devui-line-height-base, 1.5)
}

.devui-scroll-overlay {
    overflow: auto
}

.devui-scroll-overlay::-webkit-scrollbar-thumb {
    background-color: transparent
}

.devui-scroll-overlay:hover::-webkit-scrollbar-thumb {
    background-color: var(--devui-line, #d7d8da)
}

.devui-scroll-overlay:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--devui-placeholder, #babbc0)
}

@-moz-document url-prefix() {
    body * {
        scrollbar-width: thin
    }

    body * .devui-data-grid__head-wrapper,body * .devui-scroll-overlay {
        scrollbar-color: transparent transparent
    }

    body * .devui-scroll-overlay:hover {
        scrollbar-color: var(--devui-line, #d7d8da) transparent
    }
}

.mc-bubble-avatar-wrapper {
    display: inline-block
}

.mc-bubble-avatar-wrapper .mc-bubble-avatar-style {
    display: inline-block;
    text-align: center;
    color: var(--devui-light-text, #ffffff)
}

.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-0 {
    background-color: #ff8b87
}

.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-1 {
    background-color: #7693f5
}

.mc-bubble-loading[data-v-c841ddcc] {
    display: flex;
    align-items: center;
    gap: 8px
}

.mc-bubble-loading .loading-dot[data-v-c841ddcc] {
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #9880ff
}

.mc-bubble-loading .loading-dot.dot-start[data-v-c841ddcc] {
    animation: dotFlashing-c841ddcc 1s infinite linear alternate;
    animation-delay: 0s
}

.mc-bubble-loading .loading-dot.dot-middle[data-v-c841ddcc] {
    animation: dotFlashing-c841ddcc 1s infinite linear alternate;
    animation-delay: .5s
}

.mc-bubble-loading .loading-dot.dot-end[data-v-c841ddcc] {
    animation: dotFlashing-c841ddcc 1s infinite linear alternate;
    animation-delay: 1s
}

@keyframes dotFlashing-c841ddcc {
    0% {
        background-color: #9880ff
    }

    to {
        background-color: #ebe6ff
    }
}

.mc-bubble[data-v-84f28c58] {
    display: flex;
    gap: 4px
}

.mc-bubble .mc-bubble-content[data-v-84f28c58] {
    word-wrap: break-word
}

.mc-bubble .mc-bubble-content.filled[data-v-84f28c58],.mc-bubble .mc-bubble-content.bordered[data-v-84f28c58] {
    padding: 12px 16px;
    border-radius: 12px
}

.mc-bubble .mc-bubble-content.filled[data-v-84f28c58] {
    background-color: var(--devui-global-bg, #f6f6f8)
}

.mc-bubble .mc-bubble-content.bordered[data-v-84f28c58] {
    border: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.mc-bubble .mc-bubble-avatar[data-v-84f28c58] {
    flex-shrink: 0;
    display: flex;
    gap: 4px
}

.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name[data-v-84f28c58] {
    font-size: 14px
}

.mc-bubble .mc-bubble-avatar.empty-avatar[data-v-84f28c58] {
    visibility: hidden
}

.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar[data-v-84f28c58] {
    align-items: center
}

.mc-bubble .mc-bubble-content-container[data-v-84f28c58] {
    max-width: 100%
}

.mc-bubble.mc-bubble-avatar-top[data-v-84f28c58] {
    flex-direction: column
}

.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side[data-v-84f28c58] {
    align-items: center
}

.mc-bubble.mc-bubble-avatar-side.mc-bubble-right[data-v-84f28c58] {
    flex-direction: row-reverse;
    justify-content: end
}

.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar[data-v-84f28c58],.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container[data-v-84f28c58] {
    display: flex
}

.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar[data-v-84f28c58],.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container[data-v-84f28c58] {
    justify-content: end
}

.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar[data-v-84f28c58] {
    flex-direction: row-reverse
}

.mc-header[data-v-b2bdb259] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mc-header .mc-header-logo-container[data-v-b2bdb259] {
    display: flex;
    align-items: center;
    gap: 4px
}

.mc-header .mc-header-logo-container.clickable[data-v-b2bdb259] {
    cursor: pointer
}

.mc-header .mc-header-logo-container .mc-header-title[data-v-b2bdb259] {
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 20px
}

.mc-textarea {
    width: 100%;
    height: 64px;
    padding: 4px 0;
    color: var(--devui-text, #252b3a);
    background-color: var(--devui-form-control-bg, #ffffff);
    vertical-align: middle;
    outline: none;
    box-sizing: border-box;
    resize: none;
    border: none
}

.mc-textarea.mc-textarea-simple {
    height: 32px
}

.mc-textarea.mc-textarea-disabled {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.mc-textarea::placeholder {
    color: var(--devui-placeholder, #babbc0)
}

.mc-button[data-v-e35d1463] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 64px;
    height: 32px;
    line-height: 1.5;
    color: var(--devui-light-text, #ffffff);
    font-size: var(--devui-font-size-md, 12px);
    padding: 0 16px;
    border-radius: 20px;
    background-color: var(--devui-primary, #5e7ce0);
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.mc-button.mc-button-loading svg[data-v-e35d1463] {
    animation: rotating-e35d1463 1s linear infinite
}

.mc-button.mousedown[data-v-e35d1463]:not(:disabled) {
    transform: scale(.95)
}

.mc-button[data-v-e35d1463]:hover {
    background-color: var(--devui-primary-hover, #7693f5)
}

.mc-button[data-v-e35d1463]:active {
    background-color: var(--devui-primary-active, #344899)
}

.mc-button[data-v-e35d1463]:disabled {
    color: var(--devui-light-text, #ffffff);
    background-color: var(--devui-primary-disabled, #beccfa);
    cursor: not-allowed
}

.mc-button .mc-button-content[data-v-e35d1463] {
    display: inline-flex;
    align-items: center
}

.mc-button .mc-button-water-wave[data-v-e35d1463] {
    position: absolute;
    background-color: var(--devui-base-bg, #ffffff);
    border-radius: 50%;
    opacity: 0;
    width: 20px;
    height: 20px;
    transform: translate(-50%,-50%);
    animation: waterWave-e35d1463 var(--devui-animation-duration-slow, .3s) var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1))
}

.mc-button svg[data-v-e35d1463] {
    margin-right: 4px
}

.mc-button svg[data-v-e35d1463] path {
    fill: var(--devui-light-text, #ffffff)
}

@keyframes rotating-e35d1463 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(180deg)
    }
}

@keyframes waterWave-e35d1463 {
    0% {
        opacity: .2;
        width: 30px;
        height: 30px
    }

    to {
        opacity: 0;
        width: 200px;
        height: 200px
    }
}

.mc-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px 0;
    border: 1px solid var(--devui-form-control-line, #d7d8da);
    border-radius: 14px;
    box-sizing: border-box
}

.mc-input.mc-input-disabled {
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.mc-input .mc-input-content {
    display: flex;
    align-items: flex-end;
    padding: 0 8px
}

.mc-input .mc-input-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 8px
}

.mc-input .mc-input-foot .mc-input-foot-left {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center
}

.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count {
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px)
}

.mc-introduction[data-v-713f42f8] {
    display: flex;
    gap: 12px;
    flex-direction: column;
    color: var(--devui-text, #252b3a)
}

.mc-introduction .mc-introduction-logo-container[data-v-713f42f8] {
    display: flex;
    align-items: center;
    gap: 8px
}

.mc-introduction .mc-introduction-logo-container .mc-introduction-title[data-v-713f42f8] {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 1px
}

.mc-introduction .mc-introduction-sub-title[data-v-713f42f8] {
    font-weight: 500;
    font-size: 18px
}

.mc-introduction .mc-introduction-description[data-v-713f42f8] {
    font-size: var(--devui-font-size-sm, 12px)
}

.mc-introduction .mc-introduction-description>div[data-v-713f42f8] {
    line-height: 1.5
}

.mc-introduction.filled[data-v-713f42f8] {
    background-color: var(--devui-global-bg, #f6f6f8);
    border-radius: 8px;
    padding: 8px 12px
}

.mc-introduction.center[data-v-713f42f8] {
    align-items: center
}

.mc-introduction.center .mc-introduction-description[data-v-713f42f8] {
    text-align: center
}

.mc-introduction.left[data-v-713f42f8] {
    align-items: flex-start
}

.mc-introduction.left .mc-introduction-description[data-v-713f42f8] {
    text-align: left
}

.mc-introduction.right[data-v-713f42f8] {
    align-items: flex-end
}

.mc-introduction.right .mc-introduction-description[data-v-713f42f8] {
    text-align: right
}

.mc-layout-content[data-v-ebfcd679] {
    flex: auto;
    min-height: 0
}

.mc-layout-header[data-v-168a1101] {
    flex: 0 0 auto;
    min-height: 40px
}

.mc-layout[data-v-0b915142] {
    display: flex;
    flex: auto;
    flex-direction: column
}

.mc-layout-aside[data-v-0b915142] {
    flex-direction: row
}

.mc-list[data-v-8b3206af] {
    width: 100%;
    max-height: 300px;
    box-sizing: border-box;
    overflow: auto
}

.mc-list.mc-list-horizontal .mc-list-item[data-v-8b3206af] {
    width: unset
}

.mc-list:not(.mc-list-horizontal) .mc-list-item[data-v-8b3206af]:not(:first-child) {
    margin-top: 4px
}

.mc-list .mc-list-item[data-v-8b3206af] {
    width: 100%;
    line-height: 20px;
    padding: 8px;
    color: var(--devui-text, #252b3a);
    font-size: var(--devui-font-size, 12px);
    border-radius: var(--devui-border-radius, 2px);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.mc-list .mc-list-item.filled[data-v-8b3206af] {
    background-color: var(--devui-gray-form-control-bg, #f5f5f5)
}

.mc-list .mc-list-item.bordered[data-v-8b3206af] {
    border: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.mc-list .mc-list-item[data-v-8b3206af]:hover,.mc-list .mc-list-item.mc-list-item-pre-selection[data-v-8b3206af] {
    color: var(--devui-list-item-hover-text, #252b3a);
    background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.mc-list .mc-list-item.mc-list-item-active[data-v-8b3206af] {
    color: var(--devui-list-item-active-text, #252b3a);
    background-color: var(--devui-list-item-active-bg, #f2f5fc)
}

.mc-list .mc-list-item.mc-list-item-disabled[data-v-8b3206af] {
    color: var(--devui-disabled-text, #cfd0d3);
    background-color: var(--devui-disabled-bg, #f5f5f5);
    cursor: not-allowed
}

.mc-list-horizontal[data-v-8b3206af] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.mc-list-horizontal.mc-list-nowrap[data-v-8b3206af] {
    flex-wrap: nowrap
}

.mc-list-horizontal.mc-list-nowrap .mc-list-item[data-v-8b3206af] {
    flex: none
}

.mc-code-block-light[data-v-ce74ce44] pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

.mc-code-block-light[data-v-ce74ce44] code.hljs {
    padding: 3px 5px
}

.mc-code-block-light[data-v-ce74ce44] .hljs {
    background: #fefefe;
    color: #545454
}

.mc-code-block-light[data-v-ce74ce44] .hljs-comment,.mc-code-block-light[data-v-ce74ce44] .hljs-quote {
    color: #696969
}

.mc-code-block-light[data-v-ce74ce44] .hljs-variable,.mc-code-block-light[data-v-ce74ce44] .hljs-template-variable,.mc-code-block-light[data-v-ce74ce44] .hljs-tag,.mc-code-block-light[data-v-ce74ce44] .hljs-name,.mc-code-block-light[data-v-ce74ce44] .hljs-selector-id,.mc-code-block-light[data-v-ce74ce44] .hljs-selector-class,.mc-code-block-light[data-v-ce74ce44] .hljs-regexp,.mc-code-block-light[data-v-ce74ce44] .hljs-deletion {
    color: #d91e18
}

.mc-code-block-light[data-v-ce74ce44] .hljs-number,.mc-code-block-light[data-v-ce74ce44] .hljs-built_in,.mc-code-block-light[data-v-ce74ce44] .hljs-literal,.mc-code-block-light[data-v-ce74ce44] .hljs-type,.mc-code-block-light[data-v-ce74ce44] .hljs-params,.mc-code-block-light[data-v-ce74ce44] .hljs-meta,.mc-code-block-light[data-v-ce74ce44] .hljs-link,.mc-code-block-light[data-v-ce74ce44] .hljs-attribute {
    color: #aa5d00
}

.mc-code-block-light[data-v-ce74ce44] .hljs-string,.mc-code-block-light[data-v-ce74ce44] .hljs-symbol,.mc-code-block-light[data-v-ce74ce44] .hljs-bullet,.mc-code-block-light[data-v-ce74ce44] .hljs-addition {
    color: green
}

.mc-code-block-light[data-v-ce74ce44] .hljs-title,.mc-code-block-light[data-v-ce74ce44] .hljs-section {
    color: #007faa
}

.mc-code-block-light[data-v-ce74ce44] .hljs-keyword,.mc-code-block-light[data-v-ce74ce44] .hljs-selector-tag {
    color: #7928a1
}

.mc-code-block-light[data-v-ce74ce44] .hljs-emphasis {
    font-style: italic
}

.mc-code-block-light[data-v-ce74ce44] .hljs-strong {
    font-weight: 700
}

@media screen and (-ms-high-contrast: active) {
    .mc-code-block-light[data-v-ce74ce44] .hljs-addition,.mc-code-block-light[data-v-ce74ce44] .hljs-attribute,.mc-code-block-light[data-v-ce74ce44] .hljs-built_in,.mc-code-block-light[data-v-ce74ce44] .hljs-bullet,.mc-code-block-light[data-v-ce74ce44] .hljs-comment,.mc-code-block-light[data-v-ce74ce44] .hljs-link,.mc-code-block-light[data-v-ce74ce44] .hljs-literal,.mc-code-block-light[data-v-ce74ce44] .hljs-meta,.mc-code-block-light[data-v-ce74ce44] .hljs-number,.mc-code-block-light[data-v-ce74ce44] .hljs-params,.mc-code-block-light[data-v-ce74ce44] .hljs-string,.mc-code-block-light[data-v-ce74ce44] .hljs-symbol,.mc-code-block-light[data-v-ce74ce44] .hljs-type,.mc-code-block-light[data-v-ce74ce44] .hljs-quote {
        color: highlight
    }

    .mc-code-block-light[data-v-ce74ce44] .hljs-keyword,.mc-code-block-light[data-v-ce74ce44] .hljs-selector-tag {
        font-weight: 700
    }
}

.mc-code-block-dark[data-v-ce74ce44] pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

.mc-code-block-dark[data-v-ce74ce44] code.hljs {
    padding: 3px 5px
}

.mc-code-block-dark[data-v-ce74ce44] .hljs {
    background: #2b2b2b;
    color: #f8f8f2
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-comment,.mc-code-block-dark[data-v-ce74ce44] .hljs-quote {
    color: #d4d0ab
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-variable,.mc-code-block-dark[data-v-ce74ce44] .hljs-template-variable,.mc-code-block-dark[data-v-ce74ce44] .hljs-tag,.mc-code-block-dark[data-v-ce74ce44] .hljs-name,.mc-code-block-dark[data-v-ce74ce44] .hljs-selector-id,.mc-code-block-dark[data-v-ce74ce44] .hljs-selector-class,.mc-code-block-dark[data-v-ce74ce44] .hljs-regexp,.mc-code-block-dark[data-v-ce74ce44] .hljs-deletion {
    color: #ffa07a
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-number,.mc-code-block-dark[data-v-ce74ce44] .hljs-built_in,.mc-code-block-dark[data-v-ce74ce44] .hljs-literal,.mc-code-block-dark[data-v-ce74ce44] .hljs-type,.mc-code-block-dark[data-v-ce74ce44] .hljs-params,.mc-code-block-dark[data-v-ce74ce44] .hljs-meta,.mc-code-block-dark[data-v-ce74ce44] .hljs-link {
    color: #f5ab35
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-attribute {
    color: gold
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-string,.mc-code-block-dark[data-v-ce74ce44] .hljs-symbol,.mc-code-block-dark[data-v-ce74ce44] .hljs-bullet,.mc-code-block-dark[data-v-ce74ce44] .hljs-addition {
    color: #abe338
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-title,.mc-code-block-dark[data-v-ce74ce44] .hljs-section {
    color: #00e0e0
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-keyword,.mc-code-block-dark[data-v-ce74ce44] .hljs-selector-tag {
    color: #dcc6e0
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-emphasis {
    font-style: italic
}

.mc-code-block-dark[data-v-ce74ce44] .hljs-strong {
    font-weight: 700
}

@media screen and (-ms-high-contrast: active) {
    .mc-code-block-dark[data-v-ce74ce44] .hljs-addition,.mc-code-block-dark[data-v-ce74ce44] .hljs-attribute,.mc-code-block-dark[data-v-ce74ce44] .hljs-built_in,.mc-code-block-dark[data-v-ce74ce44] .hljs-bullet,.mc-code-block-dark[data-v-ce74ce44] .hljs-comment,.mc-code-block-dark[data-v-ce74ce44] .hljs-link,.mc-code-block-dark[data-v-ce74ce44] .hljs-literal,.mc-code-block-dark[data-v-ce74ce44] .hljs-meta,.mc-code-block-dark[data-v-ce74ce44] .hljs-number,.mc-code-block-dark[data-v-ce74ce44] .hljs-params,.mc-code-block-dark[data-v-ce74ce44] .hljs-string,.mc-code-block-dark[data-v-ce74ce44] .hljs-symbol,.mc-code-block-dark[data-v-ce74ce44] .hljs-type,.mc-code-block-dark[data-v-ce74ce44] .hljs-quote {
        color: highlight
    }

    .mc-code-block-dark[data-v-ce74ce44] .hljs-keyword,.mc-code-block-dark[data-v-ce74ce44] .hljs-selector-tag {
        font-weight: 700
    }
}

.v-enter-active[data-v-ce74ce44],.v-leave-active[data-v-ce74ce44] {
    transition: opacity .5s ease
}

.v-enter-from[data-v-ce74ce44],.v-leave-to[data-v-ce74ce44] {
    opacity: 0
}

.mc-code-block[data-v-ce74ce44] {
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 14px
}

.mc-code-block pre[data-v-ce74ce44] {
    margin: 0
}

.mc-code-block .mc-action-btn[data-v-ce74ce44] {
    width: 24px;
    height: 24px
}

.mc-code-block .mc-code-block-header[data-v-ce74ce44] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem
}

.mc-code-block .mc-code-block-header .mc-code-lang[data-v-ce74ce44] {
    font-size: var(--devui-font-size, 12px)
}

.mc-code-block .mc-code-block-actions[data-v-ce74ce44] {
    display: flex;
    align-items: center
}

.mc-code-block .mc-code-block-actions .mc-copy-btn[data-v-ce74ce44],.mc-code-block .mc-code-block-actions .mc-toggle-btn[data-v-ce74ce44] {
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    padding: 4px
}

.mc-code-block-light[data-v-ce74ce44] {
    border: 1px solid #d7d8da;
    background-color: #f5f5f5
}

.mc-code-block-light code.hljs[data-v-ce74ce44] {
    padding: 1em
}

.mc-code-block-light .mc-code-lang[data-v-ce74ce44],.mc-code-block-light .mc-code-block-actions .mc-copy-btn[data-v-ce74ce44],.mc-code-block-light .mc-code-block-actions .mc-toggle-btn[data-v-ce74ce44] {
    color: #252b3a
}

.mc-code-block-light .mc-code-block-actions .mc-copy-btn[data-v-ce74ce44]:hover,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn[data-v-ce74ce44]:hover {
    background-color: #ebebeb
}

.mc-code-block-dark[data-v-ce74ce44] {
    border: 1px solid #4e5057;
    background-color: #34363a
}

.mc-code-block-dark code.hljs[data-v-ce74ce44] {
    padding: 1em
}

.mc-code-block-dark .mc-code-lang[data-v-ce74ce44],.mc-code-block-dark .mc-code-block-actions .mc-copy-btn[data-v-ce74ce44],.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn[data-v-ce74ce44] {
    color: #ced1db
}

.mc-code-block-dark .mc-code-block-actions .mc-copy-btn[data-v-ce74ce44]:hover,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn[data-v-ce74ce44]:hover {
    background-color: #393a3e
}

.mc-code-block-dark .mc-code-block-actions .mc-copy-btn img[data-v-ce74ce44],.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn img[data-v-ce74ce44] {
    filter: brightness(1.5)
}

.collapse-transition-enter-from[data-v-ce74ce44],.collapse-transition-leave-to[data-v-ce74ce44] {
    opacity: 0
}

.collapse-transition-enter-to[data-v-ce74ce44],.collapse-transition-leave-from[data-v-ce74ce44] {
    opacity: 1
}

.collapse-transition-enter-active[data-v-ce74ce44],.collapse-transition-leave-active[data-v-ce74ce44] {
    transition: max-height .3s cubic-bezier(.5,.05,.5,.95),opacity .3s cubic-bezier(.5,.05,.5,.95)
}

.mc-markdown-render[data-v-6952e7d6] {
    overflow-x: auto
}

.mc-markdown-render.mc-markdown-render-dark[data-v-6952e7d6] {
    color: #ced1db
}

.mc-markdown-render.mc-markdown-render-light[data-v-6952e7d6] {
    color: #252b3a
}

.mc-mention[data-v-38524832] {
    position: fixed;
    max-height: 300px;
    border-radius: var(--devui-border-radius, 2px);
    background-color: var(--devui-connected-overlay-bg, #ffffff);
    box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    transform-origin: 0% 100%;
    z-index: 1000
}

.mc-mention-fade-enter-from[data-v-38524832],.mc-mention-fade-leave-to[data-v-38524832] {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
}

.mc-mention-fade-enter-to[data-v-38524832],.mc-mention-fade-leave-from[data-v-38524832] {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
}

.mc-mention-fade-enter-active[data-v-38524832] {
    transition: transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)
}

.mc-mention-fade-leave-active[data-v-38524832] {
    transition: transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)
}

.mc-prompt-icon {
    display: inline-block;
    color: var(--devui-icon-fill, #71757f)
}

.mc-prompt-icon i {
    display: block;
    transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.mc-prompt-icon img {
    display: block
}

.mc-prompt-item[data-v-270c0282] {
    display: flex;
    gap: 8px
}

.mc-prompt-item .mc-prompt-item-icon.no-description[data-v-270c0282] {
    display: flex;
    align-items: center
}

.mc-prompt-item .mc-prompt-item-content[data-v-270c0282] {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-label[data-v-270c0282] {
    font-weight: 700
}

.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-description[data-v-270c0282] {
    color: var(--devui-aide-text, #71757f)
}

@font-face {
    font-family: devui-icomoon;
    src: url(/assets/devui-icomoon.BeYkSg23.eot?1715860387);
    src: url(/assets/devui-icomoon.BHLqMzSu.woff?1715860387) format("woff"),url(/assets/devui-icomoon.C-SlqI79.ttf?1715860387) format("truetype"),url(/assets/devui-icomoon.NjuehwAK.svg?1715860387#devui-icomoon) format("svg")
}

[class^=icon-],[class*=" icon-"] {
    font-family: devui-icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: -.125em;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-add-tasklist:before {
    content: ""
}

.icon-at:before {
    content: ""
}

.icon-bold:before {
    content: ""
}

.icon-clear-style:before {
    content: ""
}

.icon-color:before {
    content: ""
}

.icon-editor-comment:before {
    content: ""
}

.icon-editor-cut:before {
    content: ""
}

.icon-emoji:before {
    content: ""
}

.icon-font-background:before {
    content: ""
}

.icon-font-size:before {
    content: ""
}

.icon-font:before {
    content: ""
}

.icon-format-painter:before {
    content: ""
}

.icon-h-title:before {
    content: ""
}

.icon-h1-title:before {
    content: ""
}

.icon-h2-title:before {
    content: ""
}

.icon-insert-ordered-list:before {
    content: ""
}

.icon-insert-quote:before {
    content: ""
}

.icon-insert-unordered-list:before {
    content: ""
}

.icon-italic:before {
    content: ""
}

.icon-line-spacing:before {
    content: ""
}

.icon-link:before {
    content: ""
}

.icon-markdown:before {
    content: ""
}

.icon-multi-picture:before {
    content: ""
}

.icon-picture:before {
    content: ""
}

.icon-redo:before {
    content: ""
}

.icon-rich-text-editor:before {
    content: ""
}

.icon-search-replace:before {
    content: ""
}

.icon-strikethrough:before {
    content: ""
}

.icon-table:before {
    content: ""
}

.icon-text-align-center:before {
    content: ""
}

.icon-text-align-left:before {
    content: ""
}

.icon-text-align-right:before {
    content: ""
}

.icon-ue-expand:before {
    content: ""
}

.icon-underline:before {
    content: ""
}

.icon-undo:before {
    content: ""
}

.icon-code-editor-add:before {
    content: ""
}

.icon-code-editor-alert:before {
    content: ""
}

.icon-code-editor-close:before {
    content: ""
}

.icon-code-editor-dark:before {
    content: ""
}

.icon-code-editor-flod:before {
    content: ""
}

.icon-code-editor-fullscreen:before {
    content: ""
}

.icon-code-editor-less:before {
    content: ""
}

.icon-code-editor-light:before {
    content: ""
}

.icon-code-editor-main:before {
    content: ""
}

.icon-code-editor-run:before {
    content: ""
}

.icon-code-editor-save:before {
    content: ""
}

.icon-code-editor-temporary:before {
    content: ""
}

.icon-code-editor-window:before {
    content: ""
}

.icon-ban:before {
    content: ""
}

.icon-dot-status:before {
    content: ""
}

.icon-error-o:before {
    content: ""
}

.icon-error:before {
    content: ""
}

.icon-forbidding-o:before {
    content: ""
}

.icon-forbidding:before {
    content: ""
}

.icon-info-o:before {
    content: ""
}

.icon-info:before {
    content: ""
}

.icon-priority:before {
    content: ""
}

.icon-right-o:before {
    content: ""
}

.icon-right:before {
    content: ""
}

.icon-running-o:before {
    content: ""
}

.icon-running:before {
    content: ""
}

.icon-solved:before {
    content: ""
}

.icon-terminate:before {
    content: ""
}

.icon-timeout:before {
    content: ""
}

.icon-unsolved:before {
    content: ""
}

.icon-waiting:before {
    content: ""
}

.icon-warning-o:before {
    content: ""
}

.icon-warning:before {
    content: ""
}

.icon-abstract:before {
    content: ""
}

.icon-access-new:before {
    content: ""
}

.icon-add-2:before {
    content: ""
}

.icon-add-bug:before {
    content: ""
}

.icon-add-child-node:before {
    content: ""
}

.icon-add-directory:before {
    content: ""
}

.icon-add-file:before {
    content: ""
}

.icon-add-fold:before {
    content: ""
}

.icon-add-interface-use-case:before {
    content: ""
}

.icon-add-label:before {
    content: ""
}

.icon-add-manual-use-case:before {
    content: ""
}

.icon-add-member:before {
    content: ""
}

.icon-add-sibling-node:before {
    content: ""
}

.icon-add-sub-module:before {
    content: ""
}

.icon-add-sub-node:before {
    content: ""
}

.icon-add:before {
    content: ""
}

.icon-align-center:before {
    content: ""
}

.icon-align-left:before {
    content: ""
}

.icon-align-right:before {
    content: ""
}

.icon-all-close:before {
    content: ""
}

.icon-all-project:before {
    content: ""
}

.icon-archive:before {
    content: ""
}

.icon-archived:before {
    content: ""
}

.icon-arrow-down:before {
    content: ""
}

.icon-arrow-left:before {
    content: ""
}

.icon-arrow-right:before {
    content: ""
}

.icon-arrow-up:before {
    content: ""
}

.icon-base-info2:before {
    content: ""
}

.icon-branch-compare:before {
    content: ""
}

.icon-branch-merge:before {
    content: ""
}

.icon-bug:before {
    content: ""
}

.icon-build-with-tool:before {
    content: ""
}

.icon-bulk-edit:before {
    content: ""
}

.icon-buy:before {
    content: ""
}

.icon-calendar:before {
    content: ""
}

.icon-cancel-forbidden:before {
    content: ""
}

.icon-cherry-pick:before {
    content: ""
}

.icon-chevron-down:before {
    content: ""
}

.icon-chevron-right:before {
    content: ""
}

.icon-chevron-up:before {
    content: ""
}

.icon-circle:before {
    content: ""
}

.icon-classroom-approve:before {
    content: ""
}

.icon-classroom-post-answers-large:before {
    content: ""
}

.icon-classroom-post-results-large:before {
    content: ""
}

.icon-classroom-reject:before {
    content: ""
}

.icon-close-folder:before {
    content: ""
}

.icon-close:before {
    content: ""
}

.icon-closed-merge:before {
    content: ""
}

.icon-cloud:before {
    content: ""
}

.icon-collapse-info:before {
    content: ""
}

.icon-collapse:before {
    content: ""
}

.icon-compact:before {
    content: ""
}

.icon-compare:before {
    content: ""
}

.icon-compile:before {
    content: ""
}

.icon-connect-code:before {
    content: ""
}

.icon-connect:before {
    content: ""
}

.icon-connection-relate:before {
    content: ""
}

.icon-contain:before {
    content: ""
}

.icon-copy-last-result:before {
    content: ""
}

.icon-copy-point:before {
    content: ""
}

.icon-copy-to-new:before {
    content: ""
}

.icon-copy:before {
    content: ""
}

.icon-cr-lock:before {
    content: ""
}

.icon-create-sub-item:before {
    content: ""
}

.icon-create-test-user-case:before {
    content: ""
}

.icon-customize-download:before {
    content: ""
}

.icon-cut:before {
    content: ""
}

.icon-dashboard:before {
    content: ""
}

.icon-delayed-execution:before {
    content: ""
}

.icon-delete:before {
    content: ""
}

.icon-depend:before {
    content: ""
}

.icon-directory:before {
    content: ""
}

.icon-discover:before {
    content: ""
}

.icon-down-config:before {
    content: ""
}

.icon-download-baseline:before {
    content: ""
}

.icon-download:before {
    content: ""
}

.icon-drag-small:before {
    content: ""
}

.icon-drag:before {
    content: ""
}

.icon-DTS:before {
    content: ""
}

.icon-edit-directory:before {
    content: ""
}

.icon-edit:before {
    content: ""
}

.icon-evaluate:before {
    content: ""
}

.icon-exit-loop:before {
    content: ""
}

.icon-expand-info:before {
    content: ""
}

.icon-expand-mode:before {
    content: ""
}

.icon-expand:before {
    content: ""
}

.icon-export:before {
    content: ""
}

.icon-external-component:before {
    content: ""
}

.icon-filter-o:before {
    content: ""
}

.icon-filter:before {
    content: ""
}

.icon-fold-bar:before {
    content: ""
}

.icon-fold:before {
    content: ""
}

.icon-folder-2:before {
    content: ""
}

.icon-forbid:before {
    content: ""
}

.icon-fork-code:before {
    content: ""
}

.icon-fork:before {
    content: ""
}

.icon-form-settings:before {
    content: ""
}

.icon-frame-contract:before {
    content: ""
}

.icon-frame-expand:before {
    content: ""
}

.icon-function-guide:before {
    content: ""
}

.icon-go-back-2:before {
    content: ""
}

.icon-go-back:before {
    content: ""
}

.icon-go-chart:before {
    content: ""
}

.icon-go-cloud-ide:before {
    content: ""
}

.icon-go-cloud-ide2:before {
    content: ""
}

.icon-go-cloudserver:before {
    content: ""
}

.icon-go-code-problem:before {
    content: ""
}

.icon-go-document:before {
    content: ""
}

.icon-go-email:before {
    content: ""
}

.icon-go-mobile:before {
    content: ""
}

.icon-go-module:before {
    content: ""
}

.icon-go-pipeline:before {
    content: ""
}

.icon-go-story:before {
    content: ""
}

.icon-go-tree:before {
    content: ""
}

.icon-gps:before {
    content: ""
}

.icon-group-submit:before {
    content: ""
}

.icon-group-update:before {
    content: ""
}

.icon-groupby-2:before {
    content: ""
}

.icon-groupby:before {
    content: ""
}

.icon-guidance:before {
    content: ""
}

.icon-head-notice:before {
    content: ""
}

.icon-health-check:before {
    content: ""
}

.icon-health:before {
    content: ""
}

.icon-help:before {
    content: ""
}

.icon-hot:before {
    content: ""
}

.icon-hotkey:before {
    content: ""
}

.icon-import:before {
    content: ""
}

.icon-insert-image:before {
    content: ""
}

.icon-insert:before {
    content: ""
}

.icon-invalid-case:before {
    content: ""
}

.icon-json:before {
    content: ""
}

.icon-judge:before {
    content: ""
}

.icon-knowledge-library:before {
    content: ""
}

.icon-layout:before {
    content: ""
}

.icon-letter-a:before {
    content: ""
}

.icon-like-solid:before {
    content: ""
}

.icon-list-view:before {
    content: ""
}

.icon-loading:before {
    content: ""
}

.icon-local-parameter:before {
    content: ""
}

.icon-location:before {
    content: ""
}

.icon-log:before {
    content: ""
}

.icon-loop:before {
    content: ""
}

.icon-loose:before {
    content: ""
}

.icon-love:before {
    content: ""
}

.icon-manual-review:before {
    content: ""
}

.icon-manual:before {
    content: ""
}

.icon-maxmize:before {
    content: ""
}

.icon-merge-request:before {
    content: ""
}

.icon-milestone:before {
    content: ""
}

.icon-minimize:before {
    content: ""
}

.icon-minus:before {
    content: ""
}

.icon-mobile:before {
    content: ""
}

.icon-modify-trace:before {
    content: ""
}

.icon-more-func:before {
    content: ""
}

.icon-more-operate:before {
    content: ""
}

.icon-more-to-more:before {
    content: ""
}

.icon-new-directory:before {
    content: ""
}

.icon-new-test-set:before {
    content: ""
}

.icon-notification:before {
    content: ""
}

.icon-one-to-more:before {
    content: ""
}

.icon-one-to-one:before {
    content: ""
}

.icon-op-add:before {
    content: ""
}

.icon-op-clearup:before {
    content: ""
}

.icon-op-download:before {
    content: ""
}

.icon-op-exit-2:before {
    content: ""
}

.icon-op-exit:before {
    content: ""
}

.icon-op-help:before {
    content: ""
}

.icon-op-home:before {
    content: ""
}

.icon-op-like:before {
    content: ""
}

.icon-op-list:before {
    content: ""
}

.icon-op-member:before {
    content: ""
}

.icon-op-mine:before {
    content: ""
}

.icon-op-mobile:before {
    content: ""
}

.icon-op-task:before {
    content: ""
}

.icon-op-unlove:before {
    content: ""
}

.icon-op-upload:before {
    content: ""
}

.icon-open-folder:before {
    content: ""
}

.icon-open-raw:before {
    content: ""
}

.icon-output:before {
    content: ""
}

.icon-partial-pass:before {
    content: ""
}

.icon-pasting:before {
    content: ""
}

.icon-patchset-lock:before {
    content: ""
}

.icon-percent:before {
    content: ""
}

.icon-plan:before {
    content: ""
}

.icon-preview-forbidden:before {
    content: ""
}

.icon-preview:before {
    content: ""
}

.icon-project-space:before {
    content: ""
}

.icon-projects:before {
    content: ""
}

.icon-property:before {
    content: ""
}

.icon-publish:before {
    content: ""
}

.icon-qrcode:before {
    content: ""
}

.icon-quick-stop:before {
    content: ""
}

.icon-refresh:before {
    content: ""
}

.icon-release-set:before {
    content: ""
}

.icon-remind-close:before {
    content: ""
}

.icon-remind:before {
    content: ""
}

.icon-remove-member-icon:before {
    content: ""
}

.icon-remove:before {
    content: ""
}

.icon-rename:before {
    content: ""
}

.icon-request:before {
    content: ""
}

.icon-restart:before {
    content: ""
}

.icon-rollback:before {
    content: ""
}

.icon-rollback2:before {
    content: ""
}

.icon-run-with-parameter:before {
    content: ""
}

.icon-run:before {
    content: ""
}

.icon-save:before {
    content: ""
}

.icon-scan-qrcode:before {
    content: ""
}

.icon-scrum:before {
    content: ""
}

.icon-search:before {
    content: ""
}

.icon-select-arrow:before {
    content: ""
}

.icon-select-horizontal-layout:before {
    content: ""
}

.icon-select-vertical-layout:before {
    content: ""
}

.icon-sequence:before {
    content: ""
}

.icon-set-keyword:before {
    content: ""
}

.icon-set-manage-icon:before {
    content: ""
}

.icon-set-normal-icon:before {
    content: ""
}

.icon-set-permission:before {
    content: ""
}

.icon-set-role:before {
    content: ""
}

.icon-setting-result:before {
    content: ""
}

.icon-setup:before {
    content: ""
}

.icon-share:before {
    content: ""
}

.icon-shrink:before {
    content: ""
}

.icon-sign:before {
    content: ""
}

.icon-sort-down:before {
    content: ""
}

.icon-sort:before {
    content: ""
}

.icon-spread-info:before {
    content: ""
}

.icon-standard:before {
    content: ""
}

.icon-star-o:before {
    content: ""
}

.icon-star:before {
    content: ""
}

.icon-start-merge:before {
    content: ""
}

.icon-start-use:before {
    content: ""
}

.icon-stop:before {
    content: ""
}

.icon-store:before {
    content: ""
}

.icon-submit-earlier:before {
    content: ""
}

.icon-submit-update:before {
    content: ""
}

.icon-suspend:before {
    content: ""
}

.icon-switch:before {
    content: ""
}

.icon-synchronize:before {
    content: ""
}

.icon-text-view:before {
    content: ""
}

.icon-to-do:before {
    content: ""
}

.icon-transactions:before {
    content: ""
}

.icon-unarchive:before {
    content: ""
}

.icon-unfold-bar:before {
    content: ""
}

.icon-unlink:before {
    content: ""
}

.icon-unload:before {
    content: ""
}

.icon-update-kanban:before {
    content: ""
}

.icon-upload:before {
    content: ""
}

.icon-veIcon-briefcase:before {
    content: ""
}

.icon-verification:before {
    content: ""
}

.icon-view:before {
    content: ""
}

.icon-zoom-in:before {
    content: ""
}

.icon-zoom-out:before {
    content: ""
}

.icon-accelerations:before {
    content: ""
}

.icon-access-token:before {
    content: ""
}

.icon-across-chain:before {
    content: ""
}

.icon-add-child-node-o:before {
    content: ""
}

.icon-add-example:before {
    content: ""
}

.icon-add-group:before {
    content: ""
}

.icon-add-member-new:before {
    content: ""
}

.icon-add-node-front:before {
    content: ""
}

.icon-add-node:before {
    content: ""
}

.icon-add-requestor:before {
    content: ""
}

.icon-add-response-header:before {
    content: ""
}

.icon-add-response:before {
    content: ""
}

.icon-add-thin:before {
    content: ""
}

.icon-add-token:before {
    content: ""
}

.icon-add-variable:before {
    content: ""
}

.icon-add_image:before {
    content: ""
}

.icon-advisory:before {
    content: ""
}

.icon-align-center-new:before {
    content: ""
}

.icon-all-collapse:before {
    content: ""
}

.icon-all-open:before {
    content: ""
}

.icon-api-common:before {
    content: ""
}

.icon-api-input:before {
    content: ""
}

.icon-api:before {
    content: ""
}

.icon-app-download:before {
    content: ""
}

.icon-appendix:before {
    content: ""
}

.icon-application:before {
    content: ""
}

.icon-archived-item:before {
    content: ""
}

.icon-arrow-down-l:before {
    content: ""
}

.icon-arrow-down-o:before {
    content: ""
}

.icon-arrow-left-l:before {
    content: ""
}

.icon-arrow-left-o:before {
    content: ""
}

.icon-arrow-right-l:before {
    content: ""
}

.icon-arrow-right-o:before {
    content: ""
}

.icon-arrow-up-l:before {
    content: ""
}

.icon-arrow-up-o:before {
    content: ""
}

.icon-arrow:before {
    content: ""
}

.icon-assembly-new:before {
    content: ""
}

.icon-assign:before {
    content: ""
}

.icon-associated-defect:before {
    content: ""
}

.icon-audit-log:before {
    content: ""
}

.icon-auxiliary-tool:before {
    content: ""
}

.icon-b-tree:before {
    content: ""
}

.icon-back:before {
    content: ""
}

.icon-base-info:before {
    content: ""
}

.icon-baseline:before {
    content: ""
}

.icon-batch-delete:before {
    content: ""
}

.icon-beans:before {
    content: ""
}

.icon-beginner-guidance:before {
    content: ""
}

.icon-binding:before {
    content: ""
}

.icon-book:before {
    content: ""
}

.icon-branch-merge-o:before {
    content: ""
}

.icon-broom:before {
    content: ""
}

.icon-build-plugin:before {
    content: ""
}

.icon-build-tool:before {
    content: ""
}

.icon-bulletin:before {
    content: ""
}

.icon-business-setting:before {
    content: ""
}

.icon-calendar-end:before {
    content: ""
}

.icon-calendar-start:before {
    content: ""
}

.icon-certificate:before {
    content: ""
}

.icon-chart-analysis:before {
    content: ""
}

.icon-chart:before {
    content: ""
}

.icon-check-swb-file:before {
    content: ""
}

.icon-chevron-down-2:before {
    content: ""
}

.icon-chevron-left-2:before {
    content: ""
}

.icon-chevron-right-2:before {
    content: ""
}

.icon-chevron-up-2:before {
    content: ""
}

.icon-children-node:before {
    content: ""
}

.icon-clean-record:before {
    content: ""
}

.icon-clearup:before {
    content: ""
}

.icon-clever-customer:before {
    content: ""
}

.icon-cloud-service-new:before {
    content: ""
}

.icon-cn-change:before {
    content: ""
}

.icon-cockpit:before {
    content: ""
}

.icon-code-repo:before {
    content: ""
}

.icon-code:before {
    content: ""
}

.icon-codecheck-plugin:before {
    content: ""
}

.icon-collapse-new:before {
    content: ""
}

.icon-collapse-to-left:before {
    content: ""
}

.icon-collapse-to-top:before {
    content: ""
}

.icon-collection:before {
    content: ""
}

.icon-colony:before {
    content: ""
}

.icon-command-generator:before {
    content: ""
}

.icon-comment:before {
    content: ""
}

.icon-commit:before {
    content: ""
}

.icon-company-member:before {
    content: ""
}

.icon-condition-input:before {
    content: ""
}

.icon-connector:before {
    content: ""
}

.icon-console:before {
    content: ""
}

.icon-construct-product:before {
    content: ""
}

.icon-container-new:before {
    content: ""
}

.icon-copy-new:before {
    content: ""
}

.icon-course:before {
    content: ""
}

.icon-custom-checkpoint:before {
    content: ""
}

.icon-cut-new:before {
    content: ""
}

.icon-dark:before {
    content: ""
}

.icon-data-mart:before {
    content: ""
}

.icon-data-storage:before {
    content: ""
}

.icon-database:before {
    content: ""
}

.icon-date:before {
    content: ""
}

.icon-delay-approval:before {
    content: ""
}

.icon-delay:before {
    content: ""
}

.icon-deploy-plugin:before {
    content: ""
}

.icon-deploy-store:before {
    content: ""
}

.icon-desk-notice:before {
    content: ""
}

.icon-detail-view:before {
    content: ""
}

.icon-details:before {
    content: ""
}

.icon-devcloud-service:before {
    content: ""
}

.icon-develop-collaboration:before {
    content: ""
}

.icon-diagnose:before {
    content: ""
}

.icon-directory-2:before {
    content: ""
}

.icon-disaster-recovery:before {
    content: ""
}

.icon-dislike:before {
    content: ""
}

.icon-display-input:before {
    content: ""
}

.icon-distribute:before {
    content: ""
}

.icon-distribution:before {
    content: ""
}

.icon-dolphin-logo:before {
    content: ""
}

.icon-domain-group:before {
    content: ""
}

.icon-domain:before {
    content: ""
}

.icon-double-down:before {
    content: ""
}

.icon-double-up:before {
    content: ""
}

.icon-download-2:before {
    content: ""
}

.icon-download-3:before {
    content: ""
}

.icon-download-asc:before {
    content: ""
}

.icon-download-p7s:before {
    content: ""
}

.icon-download-template:before {
    content: ""
}

.icon-drag-new:before {
    content: ""
}

.icon-dropdown-multiple:before {
    content: ""
}

.icon-dropdown-single:before {
    content: ""
}

.icon-droptree:before {
    content: ""
}

.icon-edit-3:before {
    content: ""
}

.icon-editor:before {
    content: ""
}

.icon-email-set:before {
    content: ""
}

.icon-email:before {
    content: ""
}

.icon-en-change-2:before {
    content: ""
}

.icon-en-change:before {
    content: ""
}

.icon-end-new:before {
    content: ""
}

.icon-enlarge:before {
    content: ""
}

.icon-enter:before {
    content: ""
}

.icon-enumeration:before {
    content: ""
}

.icon-environment:before {
    content: ""
}

.icon-exit-loop-new:before {
    content: ""
}

.icon-exit:before {
    content: ""
}

.icon-expand-new:before {
    content: ""
}

.icon-experice-new:before {
    content: ""
}

.icon-expiration-date:before {
    content: ""
}

.icon-export-o:before {
    content: ""
}

.icon-extract-dependency:before {
    content: ""
}

.icon-fee-center:before {
    content: ""
}

.icon-feedback:before {
    content: ""
}

.icon-feedback2:before {
    content: ""
}

.icon-file:before {
    content: ""
}

.icon-filter-list:before {
    content: ""
}

.icon-flow:before {
    content: ""
}

.icon-folder-new:before {
    content: ""
}

.icon-folder:before {
    content: ""
}

.icon-follow-us:before {
    content: ""
}

.icon-for-example:before {
    content: ""
}

.icon-forbid-2:before {
    content: ""
}

.icon-forbid-download:before {
    content: ""
}

.icon-format:before {
    content: ""
}

.icon-forum:before {
    content: ""
}

.icon-full-screen:before {
    content: ""
}

.icon-function-ai:before {
    content: ""
}

.icon-function-graph:before {
    content: ""
}

.icon-general-plugin:before {
    content: ""
}

.icon-global-guide:before {
    content: ""
}

.icon-global-variable:before {
    content: ""
}

.icon-go-top:before {
    content: ""
}

.icon-grab:before {
    content: ""
}

.icon-grabbing:before {
    content: ""
}

.icon-hamburger:before {
    content: ""
}

.icon-health-check-2:before {
    content: ""
}

.icon-helping:before {
    content: ""
}

.icon-history:before {
    content: ""
}

.icon-homepage:before {
    content: ""
}

.icon-homologous-tool:before {
    content: ""
}

.icon-host-group:before {
    content: ""
}

.icon-host-set:before {
    content: ""
}

.icon-host:before {
    content: ""
}

.icon-http-new:before {
    content: ""
}

.icon-hwp7s:before {
    content: ""
}

.icon-id:before {
    content: ""
}

.icon-identity-auth:before {
    content: ""
}

.icon-identity:before {
    content: ""
}

.icon-image-o:before {
    content: ""
}

.icon-import-o:before {
    content: ""
}

.icon-incremental-rebuild:before {
    content: ""
}

.icon-inform:before {
    content: ""
}

.icon-information:before {
    content: ""
}

.icon-infrastructure:before {
    content: ""
}

.icon-inherit:before {
    content: ""
}

.icon-input-new:before {
    content: ""
}

.icon-install:before {
    content: ""
}

.icon-invalid:before {
    content: ""
}

.icon-ip-legality:before {
    content: ""
}

.icon-job-collapse:before {
    content: ""
}

.icon-job-expand:before {
    content: ""
}

.icon-jump-to-fill:before {
    content: ""
}

.icon-jump-to:before {
    content: ""
}

.icon-kanban-l:before {
    content: ""
}

.icon-key-o:before {
    content: ""
}

.icon-license:before {
    content: ""
}

.icon-light:before {
    content: ""
}

.icon-like:before {
    content: ""
}

.icon-line-chart:before {
    content: ""
}

.icon-link-jump:before {
    content: ""
}

.icon-living-example:before {
    content: ""
}

.icon-loading-2:before {
    content: ""
}

.icon-local-variable:before {
    content: ""
}

.icon-location-new:before {
    content: ""
}

.icon-lock-open:before {
    content: ""
}

.icon-lock-private:before {
    content: ""
}

.icon-locked-key:before {
    content: ""
}

.icon-log-info:before {
    content: ""
}

.icon-log-out:before {
    content: ""
}

.icon-loop-new:before {
    content: ""
}

.icon-management-new:before {
    content: ""
}

.icon-management:before {
    content: ""
}

.icon-mandatory:before {
    content: ""
}

.icon-manually:before {
    content: ""
}

.icon-marketing:before {
    content: ""
}

.icon-marketplace:before {
    content: ""
}

.icon-meeting:before {
    content: ""
}

.icon-member-new:before {
    content: ""
}

.icon-member:before {
    content: ""
}

.icon-merge-request2:before {
    content: ""
}

.icon-merge:before {
    content: ""
}

.icon-message-2:before {
    content: ""
}

.icon-message:before {
    content: ""
}

.icon-metrics:before {
    content: ""
}

.icon-mine:before {
    content: ""
}

.icon-mobile-o:before {
    content: ""
}

.icon-mobile-share:before {
    content: ""
}

.icon-modify:before {
    content: ""
}

.icon-module:before {
    content: ""
}

.icon-more-2:before {
    content: ""
}

.icon-more:before {
    content: ""
}

.icon-mortarboard:before {
    content: ""
}

.icon-move-down:before {
    content: ""
}

.icon-move-up:before {
    content: ""
}

.icon-move:before {
    content: ""
}

.icon-multi-input:before {
    content: ""
}

.icon-namespace:before {
    content: ""
}

.icon-nav-collapse:before {
    content: ""
}

.icon-nav-expand:before {
    content: ""
}

.icon-navigation-collapse:before {
    content: ""
}

.icon-navigation-expand:before {
    content: ""
}

.icon-net:before {
    content: ""
}

.icon-new-defect:before {
    content: ""
}

.icon-new-directory-2:before {
    content: ""
}

.icon-new-line:before {
    content: ""
}

.icon-new-test-case:before {
    content: ""
}

.icon-new-test-task:before {
    content: ""
}

.icon-no-identity:before {
    content: ""
}

.icon-no-sort:before {
    content: ""
}

.icon-nogroup:before {
    content: ""
}

.icon-notice:before {
    content: ""
}

.icon-number-input:before {
    content: ""
}

.icon-numbering-rule:before {
    content: ""
}

.icon-object-storage:before {
    content: ""
}

.icon-obsolete:before {
    content: ""
}

.icon-office:before {
    content: ""
}

.icon-offline:before {
    content: ""
}

.icon-open-folder-2:before {
    content: ""
}

.icon-operation-log:before {
    content: ""
}

.icon-overview:before {
    content: ""
}

.icon-parallel:before {
    content: ""
}

.icon-partner:before {
    content: ""
}

.icon-past-point:before {
    content: ""
}

.icon-pasting-2:before {
    content: ""
}

.icon-payment:before {
    content: ""
}

.icon-pdm-sync:before {
    content: ""
}

.icon-personal-data:before {
    content: ""
}

.icon-point-copy:before {
    content: ""
}

.icon-point:before {
    content: ""
}

.icon-position:before {
    content: ""
}

.icon-postman-new:before {
    content: ""
}

.icon-primarize:before {
    content: ""
}

.icon-privacy:before {
    content: ""
}

.icon-project-nav:before {
    content: ""
}

.icon-project-new:before {
    content: ""
}

.icon-property-setting:before {
    content: ""
}

.icon-publish-new:before {
    content: ""
}

.icon-pushpin-fill:before {
    content: ""
}

.icon-pushpin:before {
    content: ""
}

.icon-radio:before {
    content: ""
}

.icon-rebuild-failed:before {
    content: ""
}

.icon-recover-download:before {
    content: ""
}

.icon-recover:before {
    content: ""
}

.icon-recycling:before {
    content: ""
}

.icon-redo-new:before {
    content: ""
}

.icon-refresh-config:before {
    content: ""
}

.icon-related-2:before {
    content: ""
}

.icon-related:before {
    content: ""
}

.icon-relation-item:before {
    content: ""
}

.icon-remove-member:before {
    content: ""
}

.icon-rename-o:before {
    content: ""
}

.icon-replace:before {
    content: ""
}

.icon-report-guideline:before {
    content: ""
}

.icon-requestor:before {
    content: ""
}

.icon-rerun:before {
    content: ""
}

.icon-reset:before {
    content: ""
}

.icon-response-header:before {
    content: ""
}

.icon-response:before {
    content: ""
}

.icon-retrieval:before {
    content: ""
}

.icon-review:before {
    content: ""
}

.icon-revoke-2:before {
    content: ""
}

.icon-revoke-new:before {
    content: ""
}

.icon-rocket:before {
    content: ""
}

.icon-rollback-o:before {
    content: ""
}

.icon-rotate:before {
    content: ""
}

.icon-round-corner:before {
    content: ""
}

.icon-run-continue:before {
    content: ""
}

.icon-run-o:before {
    content: ""
}

.icon-run-with-parameter-2:before {
    content: ""
}

.icon-saas:before {
    content: ""
}

.icon-safe-setting:before {
    content: ""
}

.icon-save-2:before {
    content: ""
}

.icon-scan-focus:before {
    content: ""
}

.icon-schedule:before {
    content: ""
}

.icon-score:before {
    content: ""
}

.icon-search-new:before {
    content: ""
}

.icon-selct-template:before {
    content: ""
}

.icon-selected-product:before {
    content: ""
}

.icon-sequence-new:before {
    content: ""
}

.icon-serial:before {
    content: ""
}

.icon-setting-results:before {
    content: ""
}

.icon-setting:before {
    content: ""
}

.icon-setup-2:before {
    content: ""
}

.icon-share-one:before {
    content: ""
}

.icon-sharing:before {
    content: ""
}

.icon-shopping-cart:before {
    content: ""
}

.icon-show-source:before {
    content: ""
}

.icon-shutdown:before {
    content: ""
}

.icon-sort-2:before {
    content: ""
}

.icon-sort-down-2:before {
    content: ""
}

.icon-source-jump:before {
    content: ""
}

.icon-start-new:before {
    content: ""
}

.icon-status:before {
    content: ""
}

.icon-stop-new:before {
    content: ""
}

.icon-store-new:before {
    content: ""
}

.icon-string:before {
    content: ""
}

.icon-sub-node:before {
    content: ""
}

.icon-submit:before {
    content: ""
}

.icon-subscribe:before {
    content: ""
}

.icon-suggestion:before {
    content: ""
}

.icon-swb-download:before {
    content: ""
}

.icon-switch-new:before {
    content: ""
}

.icon-switch-to:before {
    content: ""
}

.icon-synchrony:before {
    content: ""
}

.icon-system-folder:before {
    content: ""
}

.icon-system:before {
    content: ""
}

.icon-tag:before {
    content: ""
}

.icon-task-parameters:before {
    content: ""
}

.icon-tasklist:before {
    content: ""
}

.icon-test-case:before {
    content: ""
}

.icon-test-change-default:before {
    content: ""
}

.icon-test-change-select:before {
    content: ""
}

.icon-test-task:before {
    content: ""
}

.icon-text:before {
    content: ""
}

.icon-theme-color:before {
    content: ""
}

.icon-theme:before {
    content: ""
}

.icon-theory-practice:before {
    content: ""
}

.icon-time-update:before {
    content: ""
}

.icon-time:before {
    content: ""
}

.icon-timegap:before {
    content: ""
}

.icon-token:before {
    content: ""
}

.icon-treatment:before {
    content: ""
}

.icon-tree-collapse:before {
    content: ""
}

.icon-tree-expand:before {
    content: ""
}

.icon-trigger-new:before {
    content: ""
}

.icon-trigger:before {
    content: ""
}

.icon-turn-on:before {
    content: ""
}

.icon-unarchived-item:before {
    content: ""
}

.icon-unbinding:before {
    content: ""
}

.icon-undo-delete:before {
    content: ""
}

.icon-unlock:before {
    content: ""
}

.icon-unlove:before {
    content: ""
}

.icon-unpublish:before {
    content: ""
}

.icon-unselected:before {
    content: ""
}

.icon-unsubscribe:before {
    content: ""
}

.icon-update:before {
    content: ""
}

.icon-upload-folder:before {
    content: ""
}

.icon-use-report:before {
    content: ""
}

.icon-user-defined:before {
    content: ""
}

.icon-user-guide:before {
    content: ""
}

.icon-verification-o:before {
    content: ""
}

.icon-version-history:before {
    content: ""
}

.icon-view-2:before {
    content: ""
}

.icon-view-forbidden:before {
    content: ""
}

.icon-view-more:before {
    content: ""
}

.icon-view-new:before {
    content: ""
}

.icon-view-repeat:before {
    content: ""
}

.icon-view-report:before {
    content: ""
}

.icon-warehousing:before {
    content: ""
}

.icon-warning-triangle:before {
    content: ""
}

.icon-webhook-issue:before {
    content: ""
}

.icon-webhook-push:before {
    content: ""
}

.icon-white-list:before {
    content: ""
}

.icon-whole:before {
    content: ""
}

.icon-widen-all:before {
    content: ""
}

.icon-widen:before {
    content: ""
}

.icon-workload:before {
    content: ""
}

.icon-zip-new:before {
    content: ""
}

.icon-zoom-all:before {
    content: ""
}

.icon-zoom-out-2:before {
    content: ""
}

.icon-zoom-screen:before {
    content: ""
}

.icon-zoom:before {
    content: ""
}

.demo-container[data-v-143641b3],.demo-container[data-v-c70a49a4],.demo-container[data-v-5630b99b],.demo-container[data-v-fa272f8c] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.suggestion-list[data-v-94706570] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.suggestion-list .suggestion-item[data-v-94706570] {
    border: 1px solid var(--devui-dividing-line);
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer
}

.suggestion-list .suggestion-item[data-v-94706570]:hover {
    background-color: var(--devui-global-bg)
}

.suggestion-list .suggestion-item .suggestion-text[data-v-94706570] {
    margin-left: 8px
}

.suggestion-list .suggestion-item .icon-inform[data-v-94706570] {
    color: var(--devui-info)
}

.suggestion-list .suggestion-item .icon-mandatory[data-v-94706570] {
    color: var(--devui-success)
}

.suggestion-list .suggestion-item .icon-publish-new[data-v-94706570] {
    color: var(--devui-waiting)
}

.bubble-top-area[data-v-a4c7d0c0] {
    margin-bottom: 4px
}

.bubble-bottom-area[data-v-a4c7d0c0] {
    margin-top: 4px
}

.bubble-bottom-area .icon[data-v-a4c7d0c0] {
    padding: 4px;
    border-radius: 4px;
    cursor: pointer
}

.bubble-bottom-area .icon[data-v-a4c7d0c0]:hover {
    background-color: var(--devui-icon-hover-bg)
}

.container[data-v-4908590d],.container[data-v-11006218],.container[data-v-ecc030e4] {
    background-color: var(--devui-global-bg);
    padding: 8px 12px
}

.icon[data-v-ecc030e4] {
    padding: 4px;
    border-radius: 4px;
    cursor: pointer
}

.icon[data-v-ecc030e4]:hover {
    background-color: var(--devui-icon-hover-bg)
}

.input-prefix-wrap[data-v-9f2fe1c2] {
    height: 32px;
    line-height: 32px;
    margin-right: 8px;
    cursor: pointer
}

.input-foot-left[data-v-4cbc52eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--devui-font-size-sm);
    color: var(--devui-text)
}

.input-foot-left i[data-v-4cbc52eb] {
    margin-right: 4px
}

.appendix-wrap[data-v-4cbc52eb] {
    display: flex;
    padding: 4px 8px
}

.appendix-wrap .appendix-item[data-v-4cbc52eb] {
    padding: 4px;
    border-radius: var(--devui-border-radius);
    background-color: var(--devui-area)
}

.appendix-wrap .appendix-item i[data-v-4cbc52eb] {
    margin-left: 4px;
    cursor: pointer
}

.quick-start[data-v-6f96ce90] {
    padding: 8px 12px;
    border: 1px solid var(--devui-line);
    border-radius: 8px;
    cursor: pointer
}

.quick-start i[data-v-6f96ce90] {
    margin-right: 8px
}

.custom-list-item[data-v-b9a3796f] {
    line-height: 20px;
    padding: 8px;
    cursor: pointer
}

.custom-list-item[data-v-b9a3796f]:hover {
    background-color: var(--devui-list-item-active-bg)
}

.btn-container[data-v-dc15a950] {
    display: flex;
    justify-content: end
}

.theme-container[data-v-dc15a950] {
    margin-top: 8px;
    padding: 12px;
    border-radius: 8px
}

.light-background[data-v-dc15a950] {
    background-color: #f6f6f8
}

.dark-background[data-v-dc15a950] {
    background-color: #1a1a1c
}

.header-container {
    padding: 4px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--devui-dividing-line)
}

.header-container i {
    cursor: pointer
}

.header-container .header-left,.header-container .header-right {
    display: flex;
    align-items: center;
    gap: 8px
}

.header-container .icon-inform {
    color: var(--devui-info)
}

.header-container .icon-mandatory {
    color: var(--devui-success)
}

.header-container .icon-publish-new {
    color: var(--devui-waiting)
}

body[ui-theme=galaxy-theme] pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

body[ui-theme=galaxy-theme] code.hljs {
    padding: 3px 5px
}

body[ui-theme=galaxy-theme] .hljs {
    color: #c9d1d9;
    background: #0d1117
}

body[ui-theme=galaxy-theme] .hljs-doctag,body[ui-theme=galaxy-theme] .hljs-keyword,body[ui-theme=galaxy-theme] .hljs-meta .hljs-keyword,body[ui-theme=galaxy-theme] .hljs-template-tag,body[ui-theme=galaxy-theme] .hljs-template-variable,body[ui-theme=galaxy-theme] .hljs-type,body[ui-theme=galaxy-theme] .hljs-variable.language_ {
    color: #ff7b72
}

body[ui-theme=galaxy-theme] .hljs-title,body[ui-theme=galaxy-theme] .hljs-title.class_,body[ui-theme=galaxy-theme] .hljs-title.class_.inherited__,body[ui-theme=galaxy-theme] .hljs-title.function_ {
    color: #d2a8ff
}

body[ui-theme=galaxy-theme] .hljs-attr,body[ui-theme=galaxy-theme] .hljs-attribute,body[ui-theme=galaxy-theme] .hljs-literal,body[ui-theme=galaxy-theme] .hljs-meta,body[ui-theme=galaxy-theme] .hljs-number,body[ui-theme=galaxy-theme] .hljs-operator,body[ui-theme=galaxy-theme] .hljs-variable,body[ui-theme=galaxy-theme] .hljs-selector-attr,body[ui-theme=galaxy-theme] .hljs-selector-class,body[ui-theme=galaxy-theme] .hljs-selector-id {
    color: #79c0ff
}

body[ui-theme=galaxy-theme] .hljs-regexp,body[ui-theme=galaxy-theme] .hljs-string,body[ui-theme=galaxy-theme] .hljs-meta .hljs-string {
    color: #a5d6ff
}

body[ui-theme=galaxy-theme] .hljs-built_in,body[ui-theme=galaxy-theme] .hljs-symbol {
    color: #ffa657
}

body[ui-theme=galaxy-theme] .hljs-comment,body[ui-theme=galaxy-theme] .hljs-code,body[ui-theme=galaxy-theme] .hljs-formula {
    color: #8b949e
}

body[ui-theme=galaxy-theme] .hljs-name,body[ui-theme=galaxy-theme] .hljs-quote,body[ui-theme=galaxy-theme] .hljs-selector-tag,body[ui-theme=galaxy-theme] .hljs-selector-pseudo {
    color: #7ee787
}

body[ui-theme=galaxy-theme] .hljs-subst {
    color: #c9d1d9
}

body[ui-theme=galaxy-theme] .hljs-section {
    color: #1f6feb;
    font-weight: 700
}

body[ui-theme=galaxy-theme] .hljs-bullet {
    color: #f2cc60
}

body[ui-theme=galaxy-theme] .hljs-emphasis {
    color: #c9d1d9;
    font-style: italic
}

body[ui-theme=galaxy-theme] .hljs-strong {
    color: #c9d1d9;
    font-weight: 700
}

body[ui-theme=galaxy-theme] .hljs-addition {
    color: #aff5b4;
    background-color: #033a16
}

body[ui-theme=galaxy-theme] .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c
}

body[ui-theme=infinity-theme] pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

body[ui-theme=infinity-theme] code.hljs {
    padding: 3px 5px
}

body[ui-theme=infinity-theme] .hljs {
    color: #24292e;
    background: #fff
}

body[ui-theme=infinity-theme] .hljs-doctag,body[ui-theme=infinity-theme] .hljs-keyword,body[ui-theme=infinity-theme] .hljs-meta .hljs-keyword,body[ui-theme=infinity-theme] .hljs-template-tag,body[ui-theme=infinity-theme] .hljs-template-variable,body[ui-theme=infinity-theme] .hljs-type,body[ui-theme=infinity-theme] .hljs-variable.language_ {
    color: #d73a49
}

body[ui-theme=infinity-theme] .hljs-title,body[ui-theme=infinity-theme] .hljs-title.class_,body[ui-theme=infinity-theme] .hljs-title.class_.inherited__,body[ui-theme=infinity-theme] .hljs-title.function_ {
    color: #6f42c1
}

body[ui-theme=infinity-theme] .hljs-attr,body[ui-theme=infinity-theme] .hljs-attribute,body[ui-theme=infinity-theme] .hljs-literal,body[ui-theme=infinity-theme] .hljs-meta,body[ui-theme=infinity-theme] .hljs-number,body[ui-theme=infinity-theme] .hljs-operator,body[ui-theme=infinity-theme] .hljs-variable,body[ui-theme=infinity-theme] .hljs-selector-attr,body[ui-theme=infinity-theme] .hljs-selector-class,body[ui-theme=infinity-theme] .hljs-selector-id {
    color: #005cc5
}

body[ui-theme=infinity-theme] .hljs-regexp,body[ui-theme=infinity-theme] .hljs-string,body[ui-theme=infinity-theme] .hljs-meta .hljs-string {
    color: #032f62
}

body[ui-theme=infinity-theme] .hljs-built_in,body[ui-theme=infinity-theme] .hljs-symbol {
    color: #e36209
}

body[ui-theme=infinity-theme] .hljs-comment,body[ui-theme=infinity-theme] .hljs-code,body[ui-theme=infinity-theme] .hljs-formula {
    color: #6a737d
}

body[ui-theme=infinity-theme] .hljs-name,body[ui-theme=infinity-theme] .hljs-quote,body[ui-theme=infinity-theme] .hljs-selector-tag,body[ui-theme=infinity-theme] .hljs-selector-pseudo {
    color: #22863a
}

body[ui-theme=infinity-theme] .hljs-subst {
    color: #24292e
}

body[ui-theme=infinity-theme] .hljs-section {
    color: #005cc5;
    font-weight: 700
}

body[ui-theme=infinity-theme] .hljs-bullet {
    color: #735c0f
}

body[ui-theme=infinity-theme] .hljs-emphasis {
    color: #24292e;
    font-style: italic
}

body[ui-theme=infinity-theme] .hljs-strong {
    color: #24292e;
    font-weight: 700
}

body[ui-theme=infinity-theme] .hljs-addition {
    color: #22863a;
    background-color: #f0fff4
}

body[ui-theme=infinity-theme] .hljs-deletion {
    color: #b31d28;
    background-color: #ffeef0
}

.content-container[data-v-5953c715] {
    padding: 12px;
    background-color: var(--devui-base-bg, #ffffff)
}

.content-container[data-v-5953c715] .hljs {
    background-color: var(--devui-base-bg, #ffffff)
}

.content-container[data-v-5953c715] pre {
    margin: 0
}

.content-container[data-v-5953c715] ol {
    margin: 0;
    background-color: var(--devui-base-bg, #ffffff)
}

.custom-mention-menu {
    width: 200px
}

.demo-container[data-v-55334122],.demo-container[data-v-2bad147b],.demo-container[data-v-fe413de8] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.demo-test[data-v-a6ea6bec] {
    width: 100%;
    min-width: 500px;
    height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.demo-test .conversation-area[data-v-a6ea6bec],.demo-test .welcome-page[data-v-a6ea6bec] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0 12px
}

.demo-test .conversation-area[data-v-a6ea6bec] {
    gap: 8px
}

.demo-test .welcome-page[data-v-a6ea6bec] {
    gap: 24px;
    justify-content: center
}

.demo-test .guess-question[data-v-a6ea6bec] {
    width: 100%;
    padding: 16px 12px;
    border-radius: var(--devui-border-radius-card);
    background-color: var(--devui-gray-form-control-bg)
}

.demo-test .guess-question .guess-title[data-v-a6ea6bec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--devui-text);
    margin-bottom: 12px
}

.demo-test .guess-question .guess-title>div[data-v-a6ea6bec]:first-child {
    font-weight: 700;
    font-size: var(--devui-font-size)
}

.demo-test .guess-question .guess-title>div[data-v-a6ea6bec]:last-child {
    font-size: var(--devui-font-size-sm);
    cursor: pointer
}

.demo-test .guess-question .guess-title>div:last-child span[data-v-a6ea6bec] {
    margin-left: 4px
}

.demo-test .guess-question .guess-content[data-v-a6ea6bec] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.demo-test .guess-question .guess-content span[data-v-a6ea6bec] {
    font-size: var(--devui-font-size-sm);
    color: var(--devui-text);
    padding: 4px 12px;
    border-radius: var(--devui-border-radius-full);
    background-color: var(--devui-gray-form-control-hover-bg);
    cursor: pointer
}

.demo-test .bubble-bottom-operations[data-v-a6ea6bec] {
    margin-top: 8px
}

.demo-test .bubble-bottom-operations i[data-v-a6ea6bec] {
    padding: 4px;
    border-radius: 4px;
    cursor: pointer
}

.demo-test .bubble-bottom-operations i[data-v-a6ea6bec]:hover {
    background-color: var(--devui-icon-hover-bg)
}

.demo-test .new-convo-button[data-v-a6ea6bec] {
    padding: 0 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 39px;
    gap: 4px
}

.demo-test[data-v-a6ea6bec] .simple-prompt .mc-list {
    justify-content: unset
}

.demo-test[data-v-a6ea6bec] .intro-prompt .mc-list {
    justify-content: center
}

.demo-test .operations i[data-v-a6ea6bec] {
    padding: 4px;
    border-radius: 4px;
    cursor: pointer
}

.demo-test .operations i[data-v-a6ea6bec]:hover {
    background: var(--devui-global-bg)
}

.demo-test .agent-knowledge[data-v-a6ea6bec] {
    flex: 1;
    display: flex;
    align-items: center
}

.demo-test .agent-knowledge .agent-wrapper[data-v-a6ea6bec] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--devui-border-radius-full);
    background-color: var(--devui-area);
    cursor: pointer
}

.demo-test .agent-knowledge .agent-wrapper img[data-v-a6ea6bec] {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.demo-test .agent-knowledge .agent-wrapper span[data-v-a6ea6bec] {
    font-size: var(--devui-font-size);
    color: var(--devui-text);
    margin-right: 8px
}

.demo-test .agent-knowledge .agent-wrapper i[data-v-a6ea6bec] {
    font-size: var(--devui-font-size);
    color: var(--devui-text);
    transition: transform .3s ease-in-out
}

.demo-test .agent-knowledge .agent-wrapper i[data-v-a6ea6bec]:last-child {
    margin-left: 4px
}

.demo-test .agent-knowledge .agent-wrapper .is-open[data-v-a6ea6bec] {
    transform: rotate(180deg)
}

.demo-test .agent-knowledge .agent-knowledge-dividing-line[data-v-a6ea6bec] {
    width: 1px;
    height: 14px;
    margin: 0 12px;
    background-color: var(--devui-line)
}

.demo-test .agent-knowledge .knowledge-wrapper[data-v-a6ea6bec] {
    font-size: var(--devui-font-size);
    color: var(--devui-text);
    cursor: pointer
}

.demo-test .agent-knowledge .knowledge-wrapper span[data-v-a6ea6bec] {
    margin-left: 4px
}

.demo-test .input-foot-wrapper[data-v-a6ea6bec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-right: 8px
}

.demo-test .input-foot-wrapper .input-foot-left[data-v-a6ea6bec] {
    display: flex;
    align-items: center;
    gap: 8px
}

.demo-test .input-foot-wrapper .input-foot-left span[data-v-a6ea6bec] {
    font-size: var(--devui-font-size-sm);
    color: var(--devui-text);
    cursor: pointer
}

.demo-test .input-foot-wrapper .input-foot-left .input-foot-dividing-line[data-v-a6ea6bec] {
    width: 1px;
    height: 14px;
    background-color: var(--devui-line)
}

.demo-test .input-foot-wrapper .input-foot-left .input-foot-maxlength[data-v-a6ea6bec] {
    font-size: var(--devui-font-size-sm);
    color: var(--devui-aide-text)
}

.demo-test .input-foot-wrapper .input-foot-right[data-v-a6ea6bec]>*:not(:first-child) {
    margin-left: 8px
}

.monaco-editor {
    font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,system-ui,Ubuntu,Droid Sans,sans-serif;
    --monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace
}

.monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label {
    stroke-width: 1.2px
}

.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
    stroke-width: 1.2px
}

.monaco-hover p {
    margin: 0
}

.monaco-aria-container {
    position: absolute!important;
    top: 0;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%)
}

.monaco-editor.hc-black,.monaco-editor.hc-light {
    -ms-high-contrast-adjust: none
}

@media screen and (-ms-high-contrast:active) {
    .monaco-editor.vs .view-overlays .current-line,.monaco-editor.vs-dark .view-overlays .current-line {
        border-color: windowtext!important;
        border-left: 0;
        border-right: 0
    }

    .monaco-editor.vs .cursor,.monaco-editor.vs-dark .cursor {
        background-color: windowtext!important
    }

    .monaco-editor.vs .dnd-target,.monaco-editor.vs-dark .dnd-target {
        border-color: windowtext!important
    }

    .monaco-editor.vs .selected-text,.monaco-editor.vs-dark .selected-text {
        background-color: highlight!important
    }

    .monaco-editor.vs .view-line,.monaco-editor.vs-dark .view-line {
        -ms-high-contrast-adjust: none
    }

    .monaco-editor.vs .view-line span,.monaco-editor.vs-dark .view-line span {
        color: windowtext!important
    }

    .monaco-editor.vs .view-line span.inline-selected-text,.monaco-editor.vs-dark .view-line span.inline-selected-text {
        color: highlighttext!important
    }

    .monaco-editor.vs .view-overlays,.monaco-editor.vs-dark .view-overlays {
        -ms-high-contrast-adjust: none
    }

    .monaco-editor.vs .selectionHighlight,.monaco-editor.vs-dark .selectionHighlight,.monaco-editor.vs .wordHighlight,.monaco-editor.vs-dark .wordHighlight,.monaco-editor.vs .wordHighlightStrong,.monaco-editor.vs-dark .wordHighlightStrong,.monaco-editor.vs .reference-decoration,.monaco-editor.vs-dark .reference-decoration {
        border: 2px dotted highlight!important;
        background: transparent!important;
        box-sizing: border-box
    }

    .monaco-editor.vs .rangeHighlight,.monaco-editor.vs-dark .rangeHighlight {
        background: transparent!important;
        border: 1px dotted activeborder!important;
        box-sizing: border-box
    }

    .monaco-editor.vs .bracket-match,.monaco-editor.vs-dark .bracket-match {
        border-color: windowtext!important;
        background: transparent!important
    }

    .monaco-editor.vs .findMatch,.monaco-editor.vs-dark .findMatch,.monaco-editor.vs .currentFindMatch,.monaco-editor.vs-dark .currentFindMatch {
        border: 2px dotted activeborder!important;
        background: transparent!important;
        box-sizing: border-box
    }

    .monaco-editor.vs .find-widget,.monaco-editor.vs-dark .find-widget {
        border: 1px solid windowtext
    }

    .monaco-editor.vs .monaco-list .monaco-list-row,.monaco-editor.vs-dark .monaco-list .monaco-list-row {
        -ms-high-contrast-adjust: none;
        color: windowtext!important
    }

    .monaco-editor.vs .monaco-list .monaco-list-row.focused,.monaco-editor.vs-dark .monaco-list .monaco-list-row.focused {
        color: highlighttext!important;
        background-color: highlight!important
    }

    .monaco-editor.vs .monaco-list .monaco-list-row:hover,.monaco-editor.vs-dark .monaco-list .monaco-list-row:hover {
        background: transparent!important;
        border: 1px solid highlight;
        box-sizing: border-box
    }

    .monaco-editor.vs .monaco-scrollable-element>.scrollbar,.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar {
        -ms-high-contrast-adjust: none;
        background: background!important;
        border: 1px solid windowtext;
        box-sizing: border-box
    }

    .monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider,.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider {
        background: windowtext!important
    }

    .monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider:hover,.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider:hover {
        background: highlight!important
    }

    .monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider.active,.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider.active {
        background: highlight!important
    }

    .monaco-editor.vs .decorationsOverviewRuler,.monaco-editor.vs-dark .decorationsOverviewRuler {
        opacity: 0
    }

    .monaco-editor.vs .minimap,.monaco-editor.vs-dark .minimap {
        display: none
    }

    .monaco-editor.vs .squiggly-d-error,.monaco-editor.vs-dark .squiggly-d-error {
        background: transparent!important;
        border-bottom: 4px double #E47777
    }

    .monaco-editor.vs .squiggly-c-warning,.monaco-editor.vs-dark .squiggly-c-warning,.monaco-editor.vs .squiggly-b-info,.monaco-editor.vs-dark .squiggly-b-info {
        border-bottom: 4px double #71B771
    }

    .monaco-editor.vs .squiggly-a-hint,.monaco-editor.vs-dark .squiggly-a-hint {
        border-bottom: 4px double #6c6c6c
    }

    .monaco-editor.vs .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
        -ms-high-contrast-adjust: none;
        color: highlighttext!important;
        background-color: highlight!important
    }

    .monaco-editor.vs .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .action-label,.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .action-label {
        -ms-high-contrast-adjust: none;
        background: transparent!important;
        border: 1px solid highlight;
        box-sizing: border-box
    }

    .monaco-diff-editor.vs .diffOverviewRuler,.monaco-diff-editor.vs-dark .diffOverviewRuler {
        display: none
    }

    .monaco-editor.vs .line-insert,.monaco-editor.vs-dark .line-insert,.monaco-editor.vs .line-delete,.monaco-editor.vs-dark .line-delete {
        background: transparent!important;
        border: 1px solid highlight!important;
        box-sizing: border-box
    }

    .monaco-editor.vs .char-insert,.monaco-editor.vs-dark .char-insert,.monaco-editor.vs .char-delete,.monaco-editor.vs-dark .char-delete {
        background: transparent!important
    }
}

.monaco-aria-container {
    position: absolute;
    left: -999em
}

::-ms-clear {
    display: none
}

.monaco-editor .editor-widget input {
    color: inherit
}

.monaco-editor {
    position: relative;
    overflow: visible;
    -webkit-text-size-adjust: 100%
}

.monaco-editor .overflow-guard {
    position: relative;
    overflow: hidden
}

.monaco-editor .view-overlays {
    position: absolute;
    top: 0
}

.monaco-editor .inputarea {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    outline: none!important;
    resize: none;
    border: none;
    overflow: hidden;
    color: transparent;
    background-color: transparent
}

.monaco-editor .inputarea.ime-input {
    z-index: 10
}

.monaco-editor .margin-view-overlays .line-numbers {
    font-variant-numeric: tabular-nums;
    position: absolute;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: default;
    height: 100%
}

.monaco-editor .relative-current-line-number {
    text-align: left;
    display: inline-block;
    width: 100%
}

.monaco-editor .margin-view-overlays .line-numbers.lh-odd {
    margin-top: 1px
}

.monaco-mouse-cursor-text {
    cursor: text
}

.monaco-editor .view-overlays .current-line,.monaco-editor .margin-view-overlays .current-line {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box
}

.monaco-editor .margin-view-overlays .current-line.current-line-margin.current-line-margin-both {
    border-right: 0
}

.monaco-editor .lines-content .cdr {
    position: absolute
}

.monaco-scrollable-element>.scrollbar>.scra {
    cursor: pointer;
    font-size: 11px!important
}

.monaco-scrollable-element>.visible {
    opacity: 1;
    background: #0000;
    transition: opacity .1s linear
}

.monaco-scrollable-element>.invisible {
    opacity: 0;
    pointer-events: none
}

.monaco-scrollable-element>.invisible.fade {
    transition: opacity .8s linear
}

.monaco-scrollable-element>.shadow {
    position: absolute;
    display: none
}

.monaco-scrollable-element>.shadow.top {
    display: block;
    top: 0;
    left: 3px;
    height: 3px;
    width: 100%
}

.monaco-scrollable-element>.shadow.left {
    display: block;
    top: 3px;
    left: 0;
    height: 100%;
    width: 3px
}

.monaco-scrollable-element>.shadow.top-left-corner {
    display: block;
    top: 0;
    left: 0;
    height: 3px;
    width: 3px
}

.monaco-editor .glyph-margin {
    position: absolute;
    top: 0
}

.monaco-editor .margin-view-overlays .cgmr {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center
}

.monaco-editor .lines-content .core-guide {
    position: absolute;
    box-sizing: border-box
}

.mtkcontrol {
    color: #fff!important;
    background: #960000!important
}

.monaco-editor.no-user-select .lines-content,.monaco-editor.no-user-select .view-line,.monaco-editor.no-user-select .view-lines {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.monaco-editor.enable-user-select {
    user-select: initial;
    -webkit-user-select: initial;
    -ms-user-select: initial
}

.monaco-editor .view-lines {
    white-space: nowrap
}

.monaco-editor .view-line {
    position: absolute;
    width: 100%
}

.monaco-editor .mtkz {
    display: inline-block
}

.monaco-editor .lines-decorations {
    position: absolute;
    top: 0;
    background: #fff
}

.monaco-editor .margin-view-overlays .cldr {
    position: absolute;
    height: 100%
}

.monaco-editor .margin-view-overlays .cmdr {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%
}

.monaco-editor .minimap.slider-mouseover .minimap-slider {
    opacity: 0;
    transition: opacity .1s linear
}

.monaco-editor .minimap.slider-mouseover:hover .minimap-slider,.monaco-editor .minimap.slider-mouseover .minimap-slider.active {
    opacity: 1
}

.monaco-editor .minimap-shadow-hidden {
    position: absolute;
    width: 0
}

.monaco-editor .minimap-shadow-visible {
    position: absolute;
    left: -6px;
    width: 6px
}

.monaco-editor.no-minimap-shadow .minimap-shadow-visible {
    position: absolute;
    left: -1px;
    width: 1px
}

.minimap.autohide {
    opacity: 0;
    transition: opacity .5s
}

.minimap.autohide:hover {
    opacity: 1
}

.monaco-editor .overlayWidgets {
    position: absolute;
    top: 0;
    left: 0
}

.monaco-editor .view-ruler {
    position: absolute;
    top: 0
}

.monaco-editor .scroll-decoration {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px
}

.monaco-editor .lines-content .cslr {
    position: absolute
}

.monaco-editor .top-left-radius {
    border-top-left-radius: 3px
}

.monaco-editor .bottom-left-radius {
    border-bottom-left-radius: 3px
}

.monaco-editor .top-right-radius {
    border-top-right-radius: 3px
}

.monaco-editor .bottom-right-radius {
    border-bottom-right-radius: 3px
}

.monaco-editor.hc-black .top-left-radius {
    border-top-left-radius: 0
}

.monaco-editor.hc-black .bottom-left-radius {
    border-bottom-left-radius: 0
}

.monaco-editor.hc-black .top-right-radius {
    border-top-right-radius: 0
}

.monaco-editor.hc-black .bottom-right-radius {
    border-bottom-right-radius: 0
}

.monaco-editor.hc-light .top-left-radius {
    border-top-left-radius: 0
}

.monaco-editor.hc-light .bottom-left-radius {
    border-bottom-left-radius: 0
}

.monaco-editor.hc-light .top-right-radius {
    border-top-right-radius: 0
}

.monaco-editor.hc-light .bottom-right-radius {
    border-bottom-right-radius: 0
}

.monaco-editor .cursors-layer {
    position: absolute;
    top: 0
}

.monaco-editor .cursors-layer>.cursor {
    position: absolute;
    overflow: hidden
}

.monaco-editor .cursors-layer.cursor-smooth-caret-animation>.cursor {
    transition: all 80ms
}

.monaco-editor .cursors-layer.cursor-block-outline-style>.cursor {
    box-sizing: border-box;
    background: transparent!important;
    border-style: solid;
    border-width: 1px
}

.monaco-editor .cursors-layer.cursor-underline-style>.cursor {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    background: transparent!important;
    box-sizing: border-box
}

.monaco-editor .cursors-layer.cursor-underline-thin-style>.cursor {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background: transparent!important;
    box-sizing: border-box
}

@keyframes monaco-cursor-smooth {
    0%,20% {
        opacity: 1
    }

    60%,to {
        opacity: 0
    }
}

@keyframes monaco-cursor-phase {
    0%,20% {
        opacity: 1
    }

    90%,to {
        opacity: 0
    }
}

@keyframes monaco-cursor-expand {
    0%,20% {
        transform: scaleY(1)
    }

    80%,to {
        transform: scaleY(0)
    }
}

.cursor-smooth {
    animation: monaco-cursor-smooth .5s ease-in-out 0s 20 alternate
}

.cursor-phase {
    animation: monaco-cursor-phase .5s ease-in-out 0s 20 alternate
}

.cursor-expand>.cursor {
    animation: monaco-cursor-expand .5s ease-in-out 0s 20 alternate
}

.monaco-editor .blockDecorations-container {
    position: absolute;
    top: 0
}

.monaco-editor .blockDecorations-block {
    position: absolute;
    box-sizing: border-box
}

.monaco-diff-editor .diffOverview {
    z-index: 9
}

.monaco-diff-editor .diffOverview .diffViewport {
    z-index: 10
}

.monaco-diff-editor.vs .diffOverview {
    background: #00000008
}

.monaco-diff-editor.vs-dark .diffOverview {
    background: #ffffff03
}

.monaco-scrollable-element.modified-in-monaco-diff-editor.vs .scrollbar,.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark .scrollbar {
    background: #0000
}

.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black .scrollbar,.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light .scrollbar {
    background: none
}

.monaco-scrollable-element.modified-in-monaco-diff-editor .slider {
    z-index: 10
}

.modified-in-monaco-diff-editor .slider.active {
    background: #ababab66
}

.modified-in-monaco-diff-editor.hc-black .slider.active,.modified-in-monaco-diff-editor.hc-light .slider.active {
    background: none
}

.monaco-editor .insert-sign,.monaco-diff-editor .insert-sign,.monaco-editor .delete-sign,.monaco-diff-editor .delete-sign {
    font-size: 11px!important;
    opacity: .7!important;
    display: flex!important;
    align-items: center
}

.monaco-editor.hc-black .insert-sign,.monaco-diff-editor.hc-black .insert-sign,.monaco-editor.hc-black .delete-sign,.monaco-diff-editor.hc-black .delete-sign,.monaco-editor.hc-light .insert-sign,.monaco-diff-editor.hc-light .insert-sign,.monaco-editor.hc-light .delete-sign,.monaco-diff-editor.hc-light .delete-sign {
    opacity: 1
}

.monaco-editor .inline-deleted-margin-view-zone,.monaco-editor .inline-added-margin-view-zone {
    text-align: right
}

.monaco-editor .arrow-revert-change {
    z-index: 10;
    position: absolute
}

.monaco-editor .arrow-revert-change:hover {
    cursor: pointer
}

.monaco-editor .view-zones .view-lines .view-line span {
    display: inline-block
}

.monaco-editor .margin-view-zones .lightbulb-glyph:hover {
    cursor: pointer
}

:root {
    --sash-size: 4px
}

.monaco-sash {
    position: absolute;
    z-index: 35;
    touch-action: none
}

.monaco-sash.disabled {
    pointer-events: none
}

.monaco-sash.mac.vertical {
    cursor: col-resize
}

.monaco-sash.vertical.minimum {
    cursor: e-resize
}

.monaco-sash.vertical.maximum {
    cursor: w-resize
}

.monaco-sash.mac.horizontal {
    cursor: row-resize
}

.monaco-sash.horizontal.minimum {
    cursor: s-resize
}

.monaco-sash.horizontal.maximum {
    cursor: n-resize
}

.monaco-sash.disabled {
    cursor: default!important;
    pointer-events: none!important
}

.monaco-sash.vertical {
    cursor: ew-resize;
    top: 0;
    width: var(--sash-size);
    height: 100%
}

.monaco-sash.horizontal {
    cursor: ns-resize;
    left: 0;
    width: 100%;
    height: var(--sash-size)
}

.monaco-sash:not(.disabled)>.orthogonal-drag-handle {
    content: " ";
    height: calc(var(--sash-size) * 2);
    width: calc(var(--sash-size) * 2);
    z-index: 100;
    display: block;
    cursor: all-scroll;
    position: absolute
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)>.orthogonal-drag-handle.start,.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)>.orthogonal-drag-handle.end {
    cursor: nwse-resize
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)>.orthogonal-drag-handle.end,.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)>.orthogonal-drag-handle.start {
    cursor: nesw-resize
}

.monaco-sash.vertical>.orthogonal-drag-handle.start {
    left: calc(var(--sash-size) * -.5);
    top: calc(var(--sash-size) * -1)
}

.monaco-sash.vertical>.orthogonal-drag-handle.end {
    left: calc(var(--sash-size) * -.5);
    bottom: calc(var(--sash-size) * -1)
}

.monaco-sash.horizontal>.orthogonal-drag-handle.start {
    top: calc(var(--sash-size) * -.5);
    left: calc(var(--sash-size) * -1)
}

.monaco-sash.horizontal>.orthogonal-drag-handle.end {
    top: calc(var(--sash-size) * -.5);
    right: calc(var(--sash-size) * -1)
}

.monaco-sash:before {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: background-color .1s ease-out;
    background: transparent
}

.monaco-sash.vertical:before {
    width: var(--sash-hover-size);
    left: calc(50% - (var(--sash-hover-size) / 2))
}

.monaco-sash.horizontal:before {
    height: var(--sash-hover-size);
    top: calc(50% - (var(--sash-hover-size) / 2))
}

.pointer-events-disabled {
    pointer-events: none!important
}

.monaco-sash.debug {
    background: #0ff
}

.monaco-sash.debug.disabled {
    background: #0ff3
}

.monaco-sash.debug:not(.disabled)>.orthogonal-drag-handle {
    background: red
}

.monaco-diff-editor .diff-review-line-number {
    text-align: right;
    display: inline-block
}

.monaco-diff-editor .diff-review {
    position: absolute;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.monaco-diff-editor .diff-review-summary {
    padding-left: 10px
}

.monaco-diff-editor .diff-review-shadow {
    position: absolute
}

.monaco-diff-editor .diff-review-row {
    white-space: pre
}

.monaco-diff-editor .diff-review-table {
    display: table;
    min-width: 100%
}

.monaco-diff-editor .diff-review-row {
    display: table-row;
    width: 100%
}

.monaco-diff-editor .diff-review-spacer {
    display: inline-block;
    width: 10px;
    vertical-align: middle
}

.monaco-diff-editor .diff-review-spacer>.codicon {
    font-size: 9px!important
}

.monaco-diff-editor .diff-review-actions {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 2px
}

.monaco-diff-editor .diff-review-actions .action-label {
    width: 16px;
    height: 16px;
    margin: 2px 0
}

.monaco-action-bar {
    white-space: nowrap;
    height: 100%
}

.monaco-action-bar .actions-container {
    display: flex;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
    align-items: center
}

.monaco-action-bar.vertical .actions-container {
    display: inline-block
}

.monaco-action-bar .action-item {
    display: block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative
}

.monaco-action-bar .action-item.disabled {
    cursor: default
}

.monaco-action-bar .action-item .icon,.monaco-action-bar .action-item .codicon {
    display: block
}

.monaco-action-bar .action-item .codicon {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px
}

.monaco-action-bar .action-label {
    font-size: 11px;
    padding: 3px;
    border-radius: 5px
}

.monaco-action-bar .action-item.disabled .action-label,.monaco-action-bar .action-item.disabled .action-label:before,.monaco-action-bar .action-item.disabled .action-label:hover {
    opacity: .6
}

.monaco-action-bar.vertical {
    text-align: left
}

.monaco-action-bar.vertical .action-item {
    display: block
}

.monaco-action-bar.vertical .action-label.separator {
    display: block;
    border-bottom: 1px solid #bbb;
    padding-top: 1px;
    margin-left: .8em;
    margin-right: .8em
}

.monaco-action-bar .action-item .action-label.separator {
    width: 1px;
    height: 16px;
    margin: 5px 4px!important;
    cursor: default;
    min-width: 1px;
    padding: 0;
    background-color: #bbb
}

.secondary-actions .monaco-action-bar .action-label {
    margin-left: 6px
}

.monaco-action-bar .action-item.select-container {
    overflow: hidden;
    flex: 1;
    max-width: 170px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.monaco-action-bar .action-item.action-dropdown-item {
    display: flex
}

.monaco-action-bar .action-item.action-dropdown-item>.action-label {
    margin-right: 1px
}

.context-view {
    position: absolute
}

.context-view.fixed {
    all: initial;
    font-family: inherit;
    font-size: 13px;
    position: fixed;
    color: inherit
}

@font-face {
    font-family: codicon;
    font-display: block;
    src: url(/assets/codicon.SZR-f31-.ttf) format("truetype")
}

.codicon[class*=codicon-] {
    font: 16px/1 codicon;
    display: inline-block;
    text-decoration: none;
    text-rendering: auto;
    text-align: center;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.codicon-wrench-subaction {
    opacity: .5
}

@keyframes codicon-spin {
    to {
        transform: rotate(360deg)
    }
}

.codicon-sync.codicon-modifier-spin,.codicon-loading.codicon-modifier-spin,.codicon-gear.codicon-modifier-spin,.codicon-notebook-state-executing.codicon-modifier-spin {
    animation: codicon-spin 1.5s steps(30) infinite
}

.codicon-modifier-disabled {
    opacity: .4
}

.codicon-loading,.codicon-tree-item-loading:before {
    animation-duration: 1s!important;
    animation-timing-function: cubic-bezier(.53,.21,.29,.67)!important
}

.quick-input-widget {
    font-size: 13px
}

.quick-input-widget .monaco-highlighted-label .highlight {
    color: #0066bf
}

.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
    color: #9dddff
}

.vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
    color: #0097fb
}

.hc-black .quick-input-widget .monaco-highlighted-label .highlight {
    color: #f38518
}

.hc-light .quick-input-widget .monaco-highlighted-label .highlight {
    color: #0f4a85
}

.monaco-keybinding>.monaco-keybinding-key {
    background-color: #ddd6;
    border: solid 1px rgba(204,204,204,.4);
    border-bottom-color: #bbb6;
    box-shadow: inset 0 -1px #bbb6;
    color: #555
}

.hc-black .monaco-keybinding>.monaco-keybinding-key {
    background-color: transparent;
    border: solid 1px rgb(111,195,223);
    box-shadow: none;
    color: #fff
}

.hc-light .monaco-keybinding>.monaco-keybinding-key {
    background-color: transparent;
    border: solid 1px #0F4A85;
    box-shadow: none;
    color: #292929
}

.vs-dark .monaco-keybinding>.monaco-keybinding-key {
    background-color: #8080802b;
    border: solid 1px rgba(51,51,51,.6);
    border-bottom-color: #4449;
    box-shadow: inset 0 -1px #4449;
    color: #ccc
}

.monaco-text-button {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

.monaco-text-button:focus {
    outline-offset: 2px!important
}

.monaco-text-button:hover {
    text-decoration: none!important
}

.monaco-button.disabled:focus,.monaco-button.disabled {
    opacity: .4!important;
    cursor: default
}

.monaco-text-button>.codicon {
    margin: 0 .2em;
    color: inherit!important
}

.monaco-button-dropdown {
    display: flex;
    cursor: pointer
}

.monaco-button-dropdown.disabled {
    cursor: default
}

.monaco-button-dropdown>.monaco-button:focus {
    outline-offset: -1px!important
}

.monaco-button-dropdown.disabled>.monaco-button.disabled,.monaco-button-dropdown.disabled>.monaco-button.disabled:focus,.monaco-button-dropdown.disabled>.monaco-button-dropdown-separator {
    opacity: .4!important
}

.monaco-button-dropdown>.monaco-button.monaco-text-button {
    border-right-width: 0!important
}

.monaco-button-dropdown .monaco-button-dropdown-separator {
    padding: 4px 0;
    cursor: default
}

.monaco-button-dropdown .monaco-button-dropdown-separator>div {
    height: 100%;
    width: 1px
}

.monaco-button-dropdown>.monaco-button.monaco-dropdown-button {
    border-left-width: 0!important
}

.monaco-description-button {
    flex-direction: column
}

.monaco-description-button .monaco-button-label {
    font-weight: 500
}

.monaco-description-button .monaco-button-description {
    font-style: italic
}

.monaco-description-button .monaco-button-label,.monaco-description-button .monaco-button-description {
    display: flex;
    justify-content: center;
    align-items: center
}

.monaco-description-button .monaco-button-label>.codicon,.monaco-description-button .monaco-button-description>.codicon {
    margin: 0 .2em;
    color: inherit!important
}

.monaco-count-badge {
    padding: 3px 6px;
    border-radius: 11px;
    font-size: 11px;
    min-width: 18px;
    min-height: 18px;
    line-height: 11px;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    box-sizing: border-box
}

.monaco-count-badge.long {
    padding: 2px 3px;
    border-radius: 2px;
    min-height: auto;
    line-height: normal
}

.monaco-progress-container {
    width: 100%;
    height: 5px;
    overflow: hidden
}

.monaco-progress-container .progress-bit {
    width: 2%;
    height: 5px;
    position: absolute;
    left: 0;
    display: none
}

.monaco-progress-container.active .progress-bit {
    display: inherit
}

.monaco-progress-container.discrete .progress-bit {
    left: 0;
    transition: width .1s linear
}

.monaco-progress-container.discrete.done .progress-bit {
    width: 100%
}

.monaco-progress-container.infinite .progress-bit {
    animation-name: progress;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform: translateZ(0);
    animation-timing-function: linear
}

.monaco-progress-container.infinite.infinite-long-running .progress-bit {
    animation-timing-function: steps(100)
}

@keyframes progress {
    0% {
        transform: translate(0) scaleX(1)
    }

    50% {
        transform: translate(2500%) scaleX(3)
    }

    to {
        transform: translate(4900%) scaleX(1)
    }
}

.quick-input-widget {
    position: absolute;
    width: 600px;
    z-index: 2550;
    left: 50%;
    margin-left: -300px;
    -webkit-app-region: no-drag
}

.quick-input-titlebar {
    display: flex;
    align-items: center
}

.quick-input-left-action-bar {
    display: flex;
    margin-left: 4px;
    flex: 1
}

.quick-input-title {
    padding: 3px 0;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden
}

.quick-input-right-action-bar {
    display: flex;
    margin-right: 4px;
    flex: 1
}

.quick-input-right-action-bar>.actions-container {
    justify-content: flex-end
}

.quick-input-titlebar .monaco-action-bar .action-label.codicon {
    background-position: center;
    background-repeat: no-repeat;
    padding: 2px
}

.quick-input-description {
    margin: 6px
}

.quick-input-header .quick-input-description {
    margin: 4px 2px
}

.quick-input-header {
    display: flex;
    padding: 6px 6px 0;
    margin-bottom: -2px
}

.quick-input-widget.hidden-input .quick-input-header {
    padding: 0;
    margin-bottom: 0
}

.quick-input-and-message {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    position: relative
}

.quick-input-check-all {
    align-self: center;
    margin: 0
}

.quick-input-filter {
    flex-grow: 1;
    display: flex;
    position: relative
}

.quick-input-box {
    flex-grow: 1
}

.quick-input-widget.show-checkboxes .quick-input-box,.quick-input-widget.show-checkboxes .quick-input-message {
    margin-left: 5px
}

.quick-input-visible-count {
    position: absolute;
    left: -10000px
}

.quick-input-count {
    align-self: center;
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center
}

.quick-input-count .monaco-count-badge {
    vertical-align: middle;
    padding: 2px 4px;
    border-radius: 2px;
    min-height: auto;
    line-height: normal
}

.quick-input-action {
    margin-left: 6px
}

.quick-input-action .monaco-text-button {
    font-size: 11px;
    padding: 0 6px;
    display: flex;
    height: 27.5px;
    align-items: center
}

.quick-input-message {
    margin-top: -1px;
    padding: 5px;
    overflow-wrap: break-word
}

.quick-input-message>.codicon {
    margin: 0 .2em;
    vertical-align: text-bottom
}

.quick-input-progress.monaco-progress-container {
    position: relative
}

.quick-input-progress.monaco-progress-container,.quick-input-progress.monaco-progress-container .progress-bit {
    height: 2px
}

.quick-input-list {
    line-height: 22px;
    margin-top: 6px;
    padding: 0 1px 1px
}

.quick-input-widget.hidden-input .quick-input-list {
    margin-top: 0
}

.quick-input-list .monaco-list {
    overflow: hidden;
    max-height: 440px
}

.quick-input-list .quick-input-list-entry {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    height: 100%;
    padding: 0 6px
}

.quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
    border-top-width: 1px;
    border-top-style: solid
}

.quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border {
    border-top-style: none
}

.quick-input-list .quick-input-list-label {
    overflow: hidden;
    display: flex;
    height: 100%;
    flex: 1
}

.quick-input-list .quick-input-list-checkbox {
    align-self: center;
    margin: 0
}

.quick-input-list .quick-input-list-rows {
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    margin-left: 5px
}

.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-rows {
    margin-left: 10px
}

.quick-input-widget .quick-input-list .quick-input-list-checkbox {
    display: none
}

.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-checkbox {
    display: inline
}

.quick-input-list .quick-input-list-rows>.quick-input-list-row {
    display: flex;
    align-items: center
}

.quick-input-list .quick-input-list-rows>.quick-input-list-row .monaco-icon-label,.quick-input-list .quick-input-list-rows>.quick-input-list-row .monaco-icon-label .monaco-icon-label-container>.monaco-icon-name-container {
    flex: 1
}

.quick-input-list .quick-input-list-rows>.quick-input-list-row .codicon[class*=codicon-] {
    vertical-align: text-bottom
}

.quick-input-list .quick-input-list-rows .monaco-highlighted-label span {
    opacity: 1
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
    margin-right: 8px
}

.quick-input-list .quick-input-list-label-meta {
    opacity: .7;
    line-height: normal;
    text-overflow: ellipsis;
    overflow: hidden
}

.quick-input-list .monaco-highlighted-label .highlight {
    font-weight: 700
}

.quick-input-list .quick-input-list-entry .quick-input-list-separator {
    margin-right: 8px
}

.quick-input-list .quick-input-list-entry-action-bar {
    display: flex;
    flex: 0;
    overflow: visible
}

.quick-input-list .quick-input-list-entry-action-bar .action-label {
    display: none
}

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
    margin-right: 4px;
    padding: 0 2px 2px
}

.quick-input-list .quick-input-list-entry-action-bar {
    margin-top: 1px
}

.quick-input-list .quick-input-list-entry-action-bar {
    margin-right: 4px
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,.quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label,.quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label {
    display: flex
}

.quick-input-list .monaco-list-row.focused .monaco-keybinding-key,.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
    color: inherit
}

.quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
    background: none
}

.monaco-inputbox {
    position: relative;
    display: block;
    padding: 0;
    box-sizing: border-box;
    font-size: inherit
}

.monaco-inputbox.idle {
    border: 1px solid transparent
}

.monaco-inputbox>.ibwrapper>.input,.monaco-inputbox>.ibwrapper>.mirror {
    padding: 4px
}

.monaco-inputbox>.ibwrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.monaco-inputbox>.ibwrapper>.input {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: inherit;
    border: none;
    font-family: inherit;
    font-size: inherit;
    resize: none;
    color: inherit
}

.monaco-inputbox>.ibwrapper>input {
    text-overflow: ellipsis
}

.monaco-inputbox>.ibwrapper>textarea.input {
    display: block;
    -ms-overflow-style: none;
    scrollbar-width: none;
    outline: none
}

.monaco-inputbox>.ibwrapper>textarea.input::-webkit-scrollbar {
    display: none
}

.monaco-inputbox>.ibwrapper>textarea.input.empty {
    white-space: nowrap
}

.monaco-inputbox>.ibwrapper>.mirror {
    position: absolute;
    display: inline-block;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    white-space: pre-wrap;
    visibility: hidden;
    word-wrap: break-word
}

.monaco-inputbox-container {
    text-align: right
}

.monaco-inputbox-container .monaco-inputbox-message {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding: .4em;
    font-size: 12px;
    line-height: 17px;
    margin-top: -1px;
    word-wrap: break-word
}

.monaco-inputbox .monaco-action-bar {
    position: absolute;
    right: 2px;
    top: 4px
}

.monaco-inputbox .monaco-action-bar .action-item {
    margin-left: 2px
}

.monaco-inputbox .monaco-action-bar .action-item .codicon {
    background-repeat: no-repeat;
    width: 16px;
    height: 16px
}

.monaco-icon-label {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis
}

.monaco-icon-label:before {
    background-size: 16px;
    background-position: left center;
    background-repeat: no-repeat;
    padding-right: 6px;
    width: 16px;
    height: 22px;
    line-height: inherit!important;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: top;
    flex-shrink: 0
}

.monaco-icon-label>.monaco-icon-label-container {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1
}

.monaco-icon-label>.monaco-icon-label-container>.monaco-icon-name-container>.label-name {
    color: inherit;
    white-space: pre
}

.monaco-icon-label>.monaco-icon-label-container>.monaco-icon-name-container>.label-name>.label-separator {
    margin: 0 2px;
    opacity: .5
}

.monaco-icon-label>.monaco-icon-label-container>.monaco-icon-description-container>.label-description {
    opacity: .7;
    margin-left: .5em;
    font-size: .9em;
    white-space: pre
}

.monaco-icon-label.nowrap>.monaco-icon-label-container>.monaco-icon-description-container>.label-description {
    white-space: nowrap
}

.vs .monaco-icon-label>.monaco-icon-label-container>.monaco-icon-description-container>.label-description {
    opacity: .95
}

.monaco-icon-label.italic>.monaco-icon-label-container>.monaco-icon-name-container>.label-name,.monaco-icon-label.italic>.monaco-icon-label-container>.monaco-icon-description-container>.label-description {
    font-style: italic
}

.monaco-icon-label.deprecated {
    text-decoration: line-through;
    opacity: .66
}

.monaco-icon-label.italic:after {
    font-style: italic
}

.monaco-icon-label.strikethrough>.monaco-icon-label-container>.monaco-icon-name-container>.label-name,.monaco-icon-label.strikethrough>.monaco-icon-label-container>.monaco-icon-description-container>.label-description {
    text-decoration: line-through
}

.monaco-icon-label:after {
    opacity: .75;
    font-size: 90%;
    font-weight: 600;
    margin: auto 16px 0 5px;
    text-align: center
}

.monaco-list:focus .selected .monaco-icon-label,.monaco-list:focus .selected .monaco-icon-label:after {
    color: inherit!important
}

.monaco-list-row.focused.selected .label-description,.monaco-list-row.selected .label-description {
    opacity: .8
}

.monaco-keybinding {
    display: flex;
    align-items: center;
    line-height: 10px
}

.monaco-keybinding>.monaco-keybinding-key {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    vertical-align: middle;
    font-size: 11px;
    padding: 3px 5px;
    margin: 0 2px
}

.monaco-keybinding>.monaco-keybinding-key:first-child {
    margin-left: 0
}

.monaco-keybinding>.monaco-keybinding-key:last-child {
    margin-right: 0
}

.monaco-keybinding>.monaco-keybinding-key-separator {
    display: inline-block
}

.monaco-keybinding>.monaco-keybinding-key-chord-separator {
    width: 6px
}

.monaco-list {
    position: relative;
    height: 100%;
    width: 100%;
    white-space: nowrap
}

.monaco-list.mouse-support {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.monaco-list>.monaco-scrollable-element {
    height: 100%
}

.monaco-list-rows {
    position: relative;
    width: 100%;
    height: 100%
}

.monaco-list.horizontal-scrolling .monaco-list-rows {
    width: auto;
    min-width: 100%
}

.monaco-list-row {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%
}

.monaco-list.mouse-support .monaco-list-row {
    cursor: pointer;
    touch-action: none
}

.monaco-list-row.scrolling {
    display: none!important
}

.monaco-list.element-focused,.monaco-list.selection-single,.monaco-list.selection-multiple {
    outline: 0!important
}

.monaco-drag-image {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px;
    position: absolute;
    z-index: 1000
}

.monaco-list-type-filter-message {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 40px 1em 1em;
    text-align: center;
    white-space: normal;
    opacity: .7;
    pointer-events: none
}

.monaco-list-type-filter-message:empty {
    display: none
}

.monaco-split-view2 {
    position: relative;
    width: 100%;
    height: 100%
}

.monaco-split-view2>.sash-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.monaco-split-view2>.sash-container>.monaco-sash {
    pointer-events: initial
}

.monaco-split-view2>.monaco-scrollable-element {
    width: 100%;
    height: 100%
}

.monaco-split-view2>.monaco-scrollable-element>.split-view-container {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    position: relative
}

.monaco-split-view2>.monaco-scrollable-element>.split-view-container>.split-view-view {
    white-space: initial;
    position: absolute
}

.monaco-split-view2>.monaco-scrollable-element>.split-view-container>.split-view-view:not(.visible) {
    display: none
}

.monaco-split-view2.vertical>.monaco-scrollable-element>.split-view-container>.split-view-view {
    width: 100%
}

.monaco-split-view2.horizontal>.monaco-scrollable-element>.split-view-container>.split-view-view {
    height: 100%
}

.monaco-split-view2.separator-border>.monaco-scrollable-element>.split-view-container>.split-view-view:not(:first-child):before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    background-color: var(--separator-border)
}

.monaco-split-view2.separator-border.horizontal>.monaco-scrollable-element>.split-view-container>.split-view-view:not(:first-child):before {
    height: 100%;
    width: 1px
}

.monaco-split-view2.separator-border.vertical>.monaco-scrollable-element>.split-view-container>.split-view-view:not(:first-child):before {
    height: 1px;
    width: 100%
}

.monaco-table {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    white-space: nowrap
}

.monaco-table>.monaco-split-view2 {
    border-bottom: 1px solid transparent
}

.monaco-table>.monaco-list {
    flex: 1
}

.monaco-table-tr {
    display: flex;
    height: 100%
}

.monaco-table-th {
    width: 100%;
    height: 100%;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis
}

.monaco-table-th,.monaco-table-td {
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.monaco-table>.monaco-split-view2 .monaco-sash.vertical:before {
    content: "";
    position: absolute;
    left: calc(var(--sash-size) / 2);
    width: 0;
    border-left: 1px solid transparent
}

.monaco-table>.monaco-split-view2,.monaco-table>.monaco-split-view2 .monaco-sash.vertical:before {
    transition: border-color .2s ease-out
}

.monaco-custom-toggle {
    margin-left: 2px;
    float: left;
    cursor: pointer;
    overflow: hidden;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid transparent;
    padding: 1px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.monaco-custom-toggle:hover {
    background-color: var(--vscode-inputOption-hoverBackground)
}

.hc-black .monaco-custom-toggle:hover,.hc-light .monaco-custom-toggle:hover {
    border: 1px dashed var(--vscode-focusBorder)
}

.hc-black .monaco-custom-toggle,.hc-light .monaco-custom-toggle,.hc-black .monaco-custom-toggle:hover,.hc-light .monaco-custom-toggle:hover {
    background: none
}

.monaco-custom-toggle.monaco-checkbox {
    height: 18px;
    width: 18px;
    border: 1px solid transparent;
    border-radius: 3px;
    margin-right: 9px;
    margin-left: 0;
    padding: 0;
    opacity: 1;
    background-size: 16px!important
}

.monaco-custom-toggle.monaco-checkbox:not(.checked):before {
    visibility: hidden
}

.monaco-findInput {
    position: relative
}

.monaco-findInput .monaco-inputbox {
    font-size: 13px;
    width: 100%
}

.monaco-findInput>.controls {
    position: absolute;
    top: 3px;
    right: 2px
}

.vs .monaco-findInput.disabled {
    background-color: #e1e1e1
}

.vs-dark .monaco-findInput.disabled {
    background-color: #333
}

.monaco-findInput.highlight-0 .controls,.hc-light .monaco-findInput.highlight-0 .controls {
    animation: monaco-findInput-highlight-0 .1s linear 0s
}

.monaco-findInput.highlight-1 .controls,.hc-light .monaco-findInput.highlight-1 .controls {
    animation: monaco-findInput-highlight-1 .1s linear 0s
}

.hc-black .monaco-findInput.highlight-0 .controls,.vs-dark .monaco-findInput.highlight-0 .controls {
    animation: monaco-findInput-highlight-dark-0 .1s linear 0s
}

.hc-black .monaco-findInput.highlight-1 .controls,.vs-dark .monaco-findInput.highlight-1 .controls {
    animation: monaco-findInput-highlight-dark-1 .1s linear 0s
}

@keyframes monaco-findInput-highlight-0 {
    0% {
        background: #fdff00cc
    }

    to {
        background: transparent
    }
}

@keyframes monaco-findInput-highlight-1 {
    0% {
        background: #fdff00cc
    }

    99% {
        background: transparent
    }
}

@keyframes monaco-findInput-highlight-dark-0 {
    0% {
        background: #ffffff70
    }

    to {
        background: transparent
    }
}

@keyframes monaco-findInput-highlight-dark-1 {
    0% {
        background: #ffffff70
    }

    99% {
        background: transparent
    }
}

.monaco-tl-row {
    display: flex;
    height: 100%;
    align-items: center;
    position: relative
}

.monaco-tl-indent {
    height: 100%;
    position: absolute;
    top: 0;
    left: 16px;
    pointer-events: none
}

.hide-arrows .monaco-tl-indent {
    left: 12px
}

.monaco-tl-indent>.indent-guide {
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    border-left: 1px solid transparent
}

.monaco-tl-indent>.indent-guide {
    transition: border-color .1s linear
}

.monaco-tl-twistie,.monaco-tl-contents {
    height: 100%
}

.monaco-tl-twistie {
    font-size: 10px;
    text-align: right;
    padding-right: 6px;
    flex-shrink: 0;
    width: 16px;
    display: flex!important;
    align-items: center;
    justify-content: center;
    transform: translate(3px)
}

.monaco-tl-contents {
    flex: 1;
    overflow: hidden
}

.monaco-tl-twistie:before {
    border-radius: 20px
}

.monaco-tl-twistie.collapsed:before {
    transform: rotate(-90deg)
}

.monaco-tl-twistie.codicon-tree-item-loading:before {
    animation: codicon-spin 1.25s steps(30) infinite
}

.monaco-tree-type-filter {
    position: absolute;
    top: 0;
    display: flex;
    padding: 3px;
    transition: top .3s;
    max-width: 200px;
    z-index: 100;
    margin: 0 6px
}

.monaco-tree-type-filter.disabled {
    top: -40px
}

.monaco-tree-type-filter-grab {
    display: flex!important;
    align-items: center;
    justify-content: center;
    cursor: grab;
    margin-right: 2px
}

.monaco-tree-type-filter-grab.grabbing {
    cursor: grabbing
}

.monaco-tree-type-filter-input {
    flex: 1
}

.monaco-tree-type-filter-input .monaco-inputbox {
    height: 23px
}

.monaco-tree-type-filter-input .monaco-inputbox>.ibwrapper>.input,.monaco-tree-type-filter-input .monaco-inputbox>.ibwrapper>.mirror {
    padding: 2px 4px
}

.monaco-tree-type-filter-input .monaco-findInput>.controls {
    top: 2px
}

.monaco-tree-type-filter-actionbar {
    margin-left: 4px
}

.monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
    padding: 2px
}

.monaco-editor .selection-anchor {
    background-color: #007acc;
    width: 2px!important
}

.monaco-editor .bracket-match {
    box-sizing: border-box
}

.monaco-editor .monaco-editor-overlaymessage {
    padding-bottom: 8px;
    z-index: 10000
}

.monaco-editor .monaco-editor-overlaymessage.below {
    padding-bottom: 0;
    padding-top: 8px;
    z-index: 10000
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.monaco-editor .monaco-editor-overlaymessage.fadeIn {
    animation: fadeIn .15s ease-out
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.monaco-editor .monaco-editor-overlaymessage.fadeOut {
    animation: fadeOut .1s ease-out
}

.monaco-editor .monaco-editor-overlaymessage .message {
    padding: 1px 4px;
    color: var(--vscode-inputValidation-infoForeground);
    background-color: var(--vscode-inputValidation-infoBackground);
    border: 1px solid var(--vscode-inputValidation-infoBorder)
}

.monaco-editor.hc-black .monaco-editor-overlaymessage .message,.monaco-editor.hc-light .monaco-editor-overlaymessage .message {
    border-width: 2px
}

.monaco-editor .monaco-editor-overlaymessage .anchor {
    width: 0!important;
    height: 0!important;
    border-color: transparent;
    border-style: solid;
    z-index: 1000;
    border-width: 8px;
    position: absolute
}

.monaco-editor .monaco-editor-overlaymessage .anchor.top {
    border-bottom-color: var(--vscode-inputValidation-infoBorder)
}

.monaco-editor .monaco-editor-overlaymessage .anchor.below {
    border-top-color: var(--vscode-inputValidation-infoBorder)
}

.monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top,.monaco-editor .monaco-editor-overlaymessage.below .anchor.below {
    display: none
}

.monaco-editor .monaco-editor-overlaymessage.below .anchor.top {
    display: inherit;
    top: -8px
}

.codeActionMenuWidget {
    padding: 8px 0;
    overflow: auto;
    font-size: 13px;
    border-radius: 5px;
    min-width: 160px;
    z-index: 40;
    display: block;
    width: 100%;
    border-width: 0px;
    border-color: none;
    background-color: var(--vscode-menu-background);
    color: var(--vscode-menu-foreground);
    box-shadow: #00000029 0 2px 8px
}

.codeActionMenuWidget .monaco-list:not(.element-focused):focus:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    content: "";
    pointer-events: none;
    outline: 0px solid!important;
    outline-width: 0px!important;
    outline-style: none!important;
    outline-offset: 0px!important
}

.codeActionMenuWidget .monaco-list {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border: none!important;
    border-width: 0px!important
}

.codeActionMenuWidget .monaco-list .monaco-scrollable-element .monaco-list-rows {
    height: 100%!important
}

.codeActionMenuWidget .monaco-list .monaco-scrollable-element {
    overflow: visible
}

.codeActionMenuWidget .monaco-list .monaco-list-row:not(.separator) {
    display: flex;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 26px;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: none;
    width: 100%
}

.codeActionMenuWidget .monaco-list .monaco-list-row:hover:not(.option-disabled),.codeActionMenuWidget .monaco-list .moncao-list-row.focused:not(.option-disabled) {
    color: var(--vscode-menu-selectionForeground)!important;
    background-color: var(--vscode-menu-selectionBackground)!important
}

.codeActionMenuWidget .monaco-list .option-disabled,.codeActionMenuWidget .monaco-list .option-disabled .focused {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--vscode-disabledForeground)!important
}

.codeActionMenuWidget .monaco-list .separator {
    border-bottom: 1px solid var(--vscode-menu-separatorBackground);
    padding-top: 0!important;
    width: 100%;
    height: 0px!important;
    opacity: 1;
    font-size: inherit;
    margin: 5px 0!important;
    border-radius: 0;
    display: flex;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: none
}

.monaco-editor .contentWidgets .codicon-light-bulb,.monaco-editor .contentWidgets .codicon-lightbulb-autofix {
    display: flex;
    align-items: center;
    justify-content: center
}

.monaco-editor .contentWidgets .codicon-light-bulb:hover,.monaco-editor .contentWidgets .codicon-lightbulb-autofix:hover {
    cursor: pointer
}

.monaco-editor .codelens-decoration {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vscode-editorCodeLens-foreground)
}

.monaco-editor .codelens-decoration>span,.monaco-editor .codelens-decoration>a {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    white-space: nowrap;
    vertical-align: sub
}

.monaco-editor .codelens-decoration>a {
    text-decoration: none
}

.monaco-editor .codelens-decoration>a:hover {
    cursor: pointer;
    color: var(--vscode-editorLink-activeForeground)!important
}

.monaco-editor .codelens-decoration>a:hover .codicon {
    color: var(--vscode-editorLink-activeForeground)!important
}

.monaco-editor .codelens-decoration .codicon {
    vertical-align: middle;
    color: currentColor!important;
    color: var(--vscode-editorCodeLens-foreground)
}

.monaco-editor .codelens-decoration>a:hover .codicon:before {
    cursor: pointer
}

@keyframes fadein {
    0% {
        opacity: 0;
        visibility: visible
    }

    to {
        opacity: 1
    }
}

.monaco-editor .codelens-decoration.fadein {
    animation: fadein .1s linear
}

.colorpicker-widget {
    height: 190px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.colorpicker-color-decoration,.hc-light .colorpicker-color-decoration {
    border: solid .1em #000;
    box-sizing: border-box;
    margin: .1em .2em 0;
    width: .8em;
    height: .8em;
    line-height: .8em;
    display: inline-block;
    cursor: pointer
}

.hc-black .colorpicker-color-decoration,.vs-dark .colorpicker-color-decoration {
    border: solid .1em #eee
}

.colorpicker-header {
    display: flex;
    height: 24px;
    position: relative;
    background: url();
    background-size: 9px 9px;
    image-rendering: pixelated
}

.colorpicker-header .picked-color {
    width: 216px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
    cursor: pointer;
    color: #fff;
    flex: 1
}

.colorpicker-header .picked-color .codicon {
    color: inherit;
    font-size: 14px;
    position: absolute;
    left: 8px
}

.colorpicker-header .picked-color.light {
    color: #000
}

.colorpicker-header .original-color {
    width: 74px;
    z-index: inherit;
    cursor: pointer
}

.colorpicker-body {
    display: flex;
    padding: 8px;
    position: relative
}

.colorpicker-body .saturation-wrap {
    overflow: hidden;
    height: 150px;
    position: relative;
    min-width: 220px;
    flex: 1
}

.colorpicker-body .saturation-box {
    height: 150px;
    position: absolute
}

.colorpicker-body .saturation-selection {
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -5px;
    border: 1px solid rgb(255,255,255);
    border-radius: 100%;
    box-shadow: 0 0 2px #000c;
    position: absolute
}

.colorpicker-body .strip {
    width: 25px;
    height: 150px
}

.colorpicker-body .hue-strip {
    position: relative;
    margin-left: 8px;
    cursor: grab;
    background: linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)
}

.colorpicker-body .opacity-strip {
    position: relative;
    margin-left: 8px;
    cursor: grab;
    background: url();
    background-size: 9px 9px;
    image-rendering: pixelated
}

.colorpicker-body .strip.grabbing {
    cursor: grabbing
}

.colorpicker-body .slider {
    position: absolute;
    top: 0;
    left: -2px;
    width: calc(100% + 4px);
    height: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.71);
    box-shadow: 0 0 1px #000000d9
}

.colorpicker-body .strip .overlay {
    height: 150px;
    pointer-events: none
}

.monaco-editor .goto-definition-link {
    text-decoration: underline;
    cursor: pointer
}

.monaco-editor .peekview-widget .head {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap
}

.monaco-editor .peekview-widget .head .peekview-title {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-left: 20px;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden
}

.monaco-editor .peekview-widget .head .peekview-title.clickable {
    cursor: pointer
}

.monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
    font-size: .9em;
    margin-left: .5em;
    text-overflow: ellipsis;
    overflow: hidden
}

.monaco-editor .peekview-widget .head .peekview-title .meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.monaco-editor .peekview-widget .head .peekview-title .dirname {
    white-space: nowrap
}

.monaco-editor .peekview-widget .head .peekview-title .filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty):before {
    content: "-";
    padding: 0 .3em
}

.monaco-editor .peekview-widget .head .peekview-actions {
    flex: 1;
    text-align: right;
    padding-right: 2px
}

.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar {
    display: inline-block
}

.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar,.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar>.actions-container {
    height: 100%
}

.monaco-editor .peekview-widget>.body {
    border-top: 1px solid;
    position: relative
}

.monaco-editor .peekview-widget .head .peekview-title .codicon {
    margin-right: 4px
}

.monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon {
    color: inherit!important
}

.monaco-editor .zone-widget {
    position: absolute;
    z-index: 10
}

.monaco-editor .zone-widget .zone-widget-container {
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 0;
    border-bottom-width: 0;
    position: relative
}

.monaco-dropdown {
    height: 100%;
    padding: 0
}

.monaco-dropdown>.dropdown-label {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.monaco-dropdown>.dropdown-label>.action-label.disabled {
    cursor: default
}

.monaco-dropdown-with-primary {
    display: flex!important;
    flex-direction: row;
    border-radius: 5px
}

.monaco-dropdown-with-primary>.action-container>.action-label {
    margin-right: 0
}

.monaco-dropdown-with-primary>.dropdown-action-container>.monaco-dropdown>.dropdown-label .codicon[class*=codicon-] {
    font-size: 12px;
    padding-left: 0;
    padding-right: 0;
    line-height: 16px;
    margin-left: -3px
}

.monaco-dropdown-with-primary>.dropdown-action-container>.monaco-dropdown>.dropdown-label>.action-label {
    display: block;
    background-size: 16px;
    background-position: center center;
    background-repeat: no-repeat
}

.monaco-action-bar .action-item.menu-entry .action-label.icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px
}

.monaco-dropdown-with-default {
    display: flex!important;
    flex-direction: row;
    border-radius: 5px
}

.monaco-dropdown-with-default>.action-container>.action-label {
    margin-right: 0
}

.monaco-dropdown-with-default>.action-container.menu-entry>.action-label.icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px
}

.monaco-dropdown-with-default>.dropdown-action-container>.monaco-dropdown>.dropdown-label .codicon[class*=codicon-] {
    font-size: 12px;
    padding-left: 0;
    padding-right: 0;
    line-height: 16px;
    margin-left: -3px
}

.monaco-dropdown-with-default>.dropdown-action-container>.monaco-dropdown>.dropdown-label>.action-label {
    display: block;
    background-size: 16px;
    background-position: center center;
    background-repeat: no-repeat
}

.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget {
    border-top-width: 1px;
    border-bottom-width: 1px
}

.monaco-editor .reference-zone-widget .inline {
    display: inline-block;
    vertical-align: top
}

.monaco-editor .reference-zone-widget .messages {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 3em 0
}

.monaco-editor .reference-zone-widget .ref-tree {
    line-height: 23px;
    background-color: var(--vscode-peekViewResult-background);
    color: var(--vscode-peekViewResult-lineForeground)
}

.monaco-editor .reference-zone-widget .ref-tree .reference {
    text-overflow: ellipsis;
    overflow: hidden
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file {
    display: inline-flex;
    width: 100%;
    height: 100%;
    color: var(--vscode-peekViewResult-fileForeground)
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
    color: inherit!important
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows>.monaco-list-row.selected:not(.highlighted) {
    background-color: var(--vscode-peekViewResult-selectionBackground);
    color: var(--vscode-peekViewResult-selectionForeground)!important
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
    margin-right: 12px;
    margin-left: auto
}

.monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
    background-color: var(--vscode-peekViewResult-matchHighlightBackground)
}

.monaco-editor .reference-zone-widget .preview .reference-decoration {
    background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
    border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
    box-sizing: border-box
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
    background-color: var(--vscode-peekViewEditor-background)
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
    background-color: var(--vscode-peekViewEditorGutter-background)
}

.monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file,.monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file {
    font-weight: 700
}

.monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight,.monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight {
    border: 1px dotted var(--vscode-contrastActiveBorder, transparent);
    box-sizing: border-box
}

.monaco-hover {
    cursor: default;
    position: absolute;
    overflow: hidden;
    z-index: 50;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    box-sizing: initial;
    animation: fadein .1s linear;
    line-height: 1.5em
}

.monaco-hover.hidden {
    display: none
}

.monaco-hover a:hover {
    cursor: pointer
}

.monaco-hover .hover-contents:not(.html-hover-contents) {
    padding: 4px 8px
}

.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents) {
    max-width: 500px;
    word-wrap: break-word
}

.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents) hr {
    min-width: 100%
}

.monaco-hover p,.monaco-hover .code,.monaco-hover ul {
    margin: 8px 0
}

.monaco-hover code {
    font-family: var(--monaco-monospace-font)
}

.monaco-hover hr {
    box-sizing: border-box;
    border-left: 0px;
    border-right: 0px;
    margin: 4px -8px -4px;
    height: 1px
}

.monaco-hover p:first-child,.monaco-hover .code:first-child,.monaco-hover ul:first-child {
    margin-top: 0
}

.monaco-hover p:last-child,.monaco-hover .code:last-child,.monaco-hover ul:last-child {
    margin-bottom: 0
}

.monaco-hover ul,.monaco-hover ol {
    padding-left: 20px
}

.monaco-hover li>p {
    margin-bottom: 0
}

.monaco-hover li>ul {
    margin-top: 0
}

.monaco-hover code {
    border-radius: 3px;
    padding: 0 .4em
}

.monaco-hover .monaco-tokenized-source {
    white-space: pre-wrap
}

.monaco-hover .hover-row.status-bar {
    font-size: 12px;
    line-height: 22px
}

.monaco-hover .hover-row.status-bar .actions {
    display: flex;
    padding: 0 8px
}

.monaco-hover .hover-row.status-bar .actions .action-container {
    margin-right: 16px;
    cursor: pointer
}

.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
    padding-right: 4px
}

.monaco-hover .markdown-hover .hover-contents .codicon {
    color: inherit;
    font-size: inherit;
    vertical-align: middle
}

.monaco-hover .hover-contents a.code-link:hover,.monaco-hover .hover-contents a.code-link {
    color: inherit
}

.monaco-hover .hover-contents a.code-link:before {
    content: "("
}

.monaco-hover .hover-contents a.code-link:after {
    content: ")"
}

.monaco-hover .hover-contents a.code-link>span {
    text-decoration: underline;
    border-bottom: 1px solid transparent;
    text-underline-position: under
}

.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span {
    margin-bottom: 4px;
    display: inline-block
}

.monaco-hover-content .action-container a {
    -webkit-user-select: none;
    user-select: none
}

.monaco-hover-content .action-container.disabled {
    pointer-events: none;
    opacity: .4;
    cursor: default
}

.monaco-editor .peekview-widget .head .peekview-title .severity-icon {
    display: inline-block;
    vertical-align: text-top;
    margin-right: 4px
}

.monaco-editor .marker-widget {
    text-overflow: ellipsis;
    white-space: nowrap
}

.monaco-editor .marker-widget>.stale {
    opacity: .6;
    font-style: italic
}

.monaco-editor .marker-widget .title {
    display: inline-block;
    padding-right: 5px
}

.monaco-editor .marker-widget .descriptioncontainer {
    position: absolute;
    white-space: pre;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    padding: 8px 12px 0 20px
}

.monaco-editor .marker-widget .descriptioncontainer .message {
    display: flex;
    flex-direction: column
}

.monaco-editor .marker-widget .descriptioncontainer .message .details {
    padding-left: 6px
}

.monaco-editor .marker-widget .descriptioncontainer .message .source,.monaco-editor .marker-widget .descriptioncontainer .message span.code {
    opacity: .6
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link {
    opacity: .6;
    color: inherit
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before {
    content: "("
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after {
    content: ")"
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link>span {
    text-decoration: underline;
    border-bottom: 1px solid transparent;
    text-underline-position: under;
    color: var(--vscode-textLink-foreground)
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link>span {
    color: var(--vscode-textLink-activeForeground)
}

.monaco-editor .marker-widget .descriptioncontainer .filename {
    cursor: pointer
}

.monaco-editor .snippet-placeholder {
    min-width: 2px;
    outline-style: solid;
    outline-width: 1px;
    background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent);
    outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent)
}

.monaco-editor .finish-snippet-placeholder {
    outline-style: solid;
    outline-width: 1px;
    background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent);
    outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent)
}

.monaco-editor.vs .dnd-target,.monaco-editor.hc-light .dnd-target {
    border-right: 2px dotted black;
    color: #fff
}

.monaco-editor.vs-dark .dnd-target {
    border-right: 2px dotted #AEAFAD;
    color: #51504f
}

.monaco-editor.hc-black .dnd-target {
    border-right: 2px dotted #fff;
    color: #000
}

.monaco-editor.mouse-default .view-lines,.monaco-editor.vs-dark.mac.mouse-default .view-lines,.monaco-editor.hc-black.mac.mouse-default .view-lines,.monaco-editor.hc-light.mac.mouse-default .view-lines {
    cursor: default
}

.monaco-editor.mouse-copy .view-lines,.monaco-editor.vs-dark.mac.mouse-copy .view-lines,.monaco-editor.hc-black.mac.mouse-copy .view-lines,.monaco-editor.hc-light.mac.mouse-copy .view-lines {
    cursor: copy
}

.monaco-editor .find-widget {
    position: absolute;
    z-index: 35;
    height: 33px;
    overflow: hidden;
    line-height: 19px;
    transition: transform .2s linear;
    padding: 0 4px;
    box-sizing: border-box;
    transform: translateY(calc(-100% - 10px))
}

.monaco-workbench.reduce-motion .monaco-editor .find-widget {
    transition: transform 0ms linear
}

.monaco-editor .find-widget textarea {
    margin: 0
}

.monaco-editor .find-widget.hiddenEditor {
    display: none
}

.monaco-editor .find-widget.replaceToggled>.replace-part {
    display: flex
}

.monaco-editor .find-widget.visible {
    transform: translateY(0)
}

.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
    outline: 1px solid -webkit-focus-ring-color;
    outline-offset: -1px
}

.monaco-editor .find-widget .monaco-inputbox .input {
    background-color: transparent;
    min-height: 0
}

.monaco-editor .find-widget .monaco-findInput .input {
    font-size: 13px
}

.monaco-editor .find-widget>.find-part,.monaco-editor .find-widget>.replace-part {
    margin: 4px 0 0 17px;
    font-size: 12px;
    display: flex
}

.monaco-editor .find-widget>.find-part .monaco-inputbox,.monaco-editor .find-widget>.replace-part .monaco-inputbox {
    min-height: 25px
}

.monaco-editor .find-widget>.replace-part .monaco-inputbox>.ibwrapper>.mirror {
    padding-right: 22px
}

.monaco-editor .find-widget>.find-part .monaco-inputbox>.ibwrapper>.input,.monaco-editor .find-widget>.find-part .monaco-inputbox>.ibwrapper>.mirror,.monaco-editor .find-widget>.replace-part .monaco-inputbox>.ibwrapper>.input,.monaco-editor .find-widget>.replace-part .monaco-inputbox>.ibwrapper>.mirror {
    padding-top: 2px;
    padding-bottom: 2px
}

.monaco-editor .find-widget>.find-part .find-actions {
    height: 25px;
    display: flex;
    align-items: center
}

.monaco-editor .find-widget>.replace-part .replace-actions {
    height: 25px;
    display: flex;
    align-items: center
}

.monaco-editor .find-widget .monaco-findInput {
    vertical-align: middle;
    display: flex;
    flex: 1
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
    width: 100%
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical {
    opacity: 0
}

.monaco-editor .find-widget .matchesCount {
    display: flex;
    flex: initial;
    margin: 0 0 0 3px;
    padding: 2px 0 0 2px;
    height: 25px;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
    line-height: 23px
}

.monaco-editor .find-widget .button {
    width: 16px;
    height: 16px;
    padding: 3px;
    border-radius: 5px;
    flex: initial;
    margin-left: 3px;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.monaco-editor .find-widget .codicon-find-selection {
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 5px
}

.monaco-editor .find-widget .button.left {
    margin-left: 0;
    margin-right: 3px
}

.monaco-editor .find-widget .button.wide {
    width: auto;
    padding: 1px 6px;
    top: -1px
}

.monaco-editor .find-widget .button.toggle {
    position: absolute;
    top: 0;
    left: 3px;
    width: 18px;
    height: 100%;
    border-radius: 0;
    box-sizing: border-box
}

.monaco-editor .find-widget .button.toggle.disabled {
    display: none
}

.monaco-editor .find-widget .disabled {
    color: var(--vscode-disabledForeground);
    cursor: default
}

.monaco-editor .find-widget>.replace-part {
    display: none
}

.monaco-editor .find-widget>.replace-part>.monaco-findInput {
    position: relative;
    display: flex;
    vertical-align: middle;
    flex: auto;
    flex-grow: 0;
    flex-shrink: 0
}

.monaco-editor .find-widget>.replace-part>.monaco-findInput>.controls {
    position: absolute;
    top: 3px;
    right: 2px
}

.monaco-editor .find-widget.reduced-find-widget .matchesCount {
    display: none
}

.monaco-editor .find-widget.narrow-find-widget {
    max-width: 257px!important
}

.monaco-editor .find-widget.collapsed-find-widget {
    max-width: 170px!important
}

.monaco-editor .find-widget.collapsed-find-widget .button.previous,.monaco-editor .find-widget.collapsed-find-widget .button.next,.monaco-editor .find-widget.collapsed-find-widget .button.replace,.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,.monaco-editor .find-widget.collapsed-find-widget>.find-part .monaco-findInput .controls {
    display: none
}

.monaco-editor .findMatch {
    animation-duration: 0;
    animation-name: inherit!important
}

.monaco-editor .find-widget .monaco-sash {
    left: 0!important
}

.monaco-editor.hc-black .find-widget .button:before {
    position: relative;
    top: 1px;
    left: 2px
}

.monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,.monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,.monaco-editor .margin-view-overlays .codicon-folding-expanded,.monaco-editor .margin-view-overlays .codicon-folding-collapsed {
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 140%;
    margin-left: 2px
}

.monaco-editor .margin-view-overlays:hover .codicon,.monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,.monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
    opacity: 1
}

.monaco-editor .inline-folded:after {
    color: gray;
    margin: .1em .2em 0;
    content: "⋯";
    display: inline;
    line-height: 1em;
    cursor: pointer
}

.monaco-editor .suggest-widget {
    width: 430px;
    z-index: 40;
    display: flex;
    flex-direction: column
}

.monaco-editor .suggest-widget.message {
    flex-direction: row;
    align-items: center
}

.monaco-editor .suggest-widget,.monaco-editor .suggest-details {
    flex: 0 1 auto;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--vscode-editorSuggestWidget-border);
    background-color: var(--vscode-editorSuggestWidget-background)
}

.monaco-editor.hc-black .suggest-widget,.monaco-editor.hc-black .suggest-details,.monaco-editor.hc-light .suggest-widget,.monaco-editor.hc-light .suggest-details {
    border-width: 2px
}

.monaco-editor .suggest-widget .suggest-status-bar {
    box-sizing: border-box;
    display: none;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    font-size: 80%;
    padding: 0 4px;
    border-top: 1px solid var(--vscode-editorSuggestWidget-border);
    overflow: hidden
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
    display: flex
}

.monaco-editor .suggest-widget .suggest-status-bar .left {
    padding-right: 8px
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
    color: var(--vscode-editorSuggestWidgetStatus-foreground)
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label {
    margin-right: 0
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label:after {
    content: ", ";
    margin-right: .3em
}

.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row>.contents>.main>.right>.readMore,.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label>.contents>.main>.right>.readMore {
    display: none
}

.monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover>.contents>.main>.right.can-expand-details>.details-label {
    width: 100%
}

.monaco-editor .suggest-widget>.message {
    padding-left: 22px
}

.monaco-editor .suggest-widget>.tree {
    height: 100%;
    width: 100%
}

.monaco-editor .suggest-widget .monaco-list {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
    display: flex;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: none
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
    color: var(--vscode-editorSuggestWidget-selectedForeground)
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon {
    color: var(--vscode-editorSuggestWidget-selectedIconForeground)
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents {
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding-left: 2px
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    justify-content: space-between
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.left,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right {
    display: flex
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused)>.contents>.main .monaco-icon-label {
    color: var(--vscode-editorSuggestWidget-foreground)
}

.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
    font-weight: 700
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main .monaco-highlighted-label .highlight {
    color: var(--vscode-editorSuggestWidget-highlightForeground)
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused>.contents>.main .monaco-highlighted-label .highlight {
    color: var(--vscode-editorSuggestWidget-focusHighlightForeground)
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.codicon-close,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.readMore:before {
    color: inherit;
    opacity: 1;
    font-size: 14px;
    cursor: pointer
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.codicon-close {
    position: absolute;
    top: 6px;
    right: 2px
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.codicon-close:hover,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.readMore:hover {
    opacity: 1
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.details-label {
    opacity: .7
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.left>.signature-label {
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .6
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.left>.qualifier-label {
    margin-left: 12px;
    opacity: .4;
    font-size: 85%;
    line-height: initial;
    text-overflow: ellipsis;
    overflow: hidden;
    align-self: center
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.details-label {
    font-size: 85%;
    margin-left: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.details-label>.monaco-tokenized-source {
    display: inline
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.details-label {
    display: none
}

.monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused>.contents>.main>.right>.details-label {
    display: inline
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label)>.contents>.main>.right>.details-label,.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label)>.contents>.main>.right>.details-label {
    display: inline
}

.monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover>.contents>.main>.right.can-expand-details>.details-label {
    width: calc(100% - 26px)
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.left {
    flex-shrink: 1;
    flex-grow: 1;
    overflow: hidden
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.left>.monaco-icon-label {
    flex-shrink: 0
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label)>.contents>.main>.left>.monaco-icon-label {
    max-width: 100%
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label>.contents>.main>.left>.monaco-icon-label {
    flex-shrink: 1
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right {
    overflow: hidden;
    flex-shrink: 4;
    max-width: 70%
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.right>.readMore {
    display: inline-block;
    position: absolute;
    right: 10px;
    width: 18px;
    height: 18px;
    visibility: hidden
}

.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row>.contents>.main>.right>.readMore {
    display: none!important
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label>.contents>.main>.right>.readMore {
    display: none
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label>.contents>.main>.right>.readMore {
    display: inline-block
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover>.contents>.main>.right>.readMore {
    visibility: visible
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {
    opacity: .66;
    text-decoration: unset
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated>.monaco-icon-label-container>.monaco-icon-name-container {
    text-decoration: line-through
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label:before {
    height: 100%
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
    display: block;
    height: 16px;
    width: 16px;
    margin-left: 2px;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide {
    display: none
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
    display: flex;
    align-items: center;
    margin-right: 4px
}

.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon:before {
    display: none
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan {
    margin: 0 0 0 .3em;
    border: .1em solid #000;
    width: .7em;
    height: .7em;
    display: inline-block
}

.monaco-editor .suggest-details-container {
    z-index: 41
}

.monaco-editor .suggest-details {
    display: flex;
    flex-direction: column;
    cursor: default;
    color: var(--vscode-editorSuggestWidget-foreground)
}

.monaco-editor .suggest-details.focused {
    border-color: var(--vscode-focusBorder)
}

.monaco-editor .suggest-details a {
    color: var(--vscode-textLink-foreground)
}

.monaco-editor .suggest-details a:hover {
    color: var(--vscode-textLink-activeForeground)
}

.monaco-editor .suggest-details code {
    background-color: var(--vscode-textCodeBlock-background)
}

.monaco-editor .suggest-details.no-docs {
    display: none
}

.monaco-editor .suggest-details>.monaco-scrollable-element {
    flex: 1
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body {
    box-sizing: border-box;
    height: 100%;
    width: 100%
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.type {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .7;
    white-space: pre;
    margin: 0 24px 0 0;
    padding: 4px 0 12px 5px
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.type.auto-wrap {
    white-space: normal;
    word-break: break-all
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs {
    margin: 0;
    padding: 4px 5px;
    white-space: pre-wrap
}

.monaco-editor .suggest-details.no-type>.monaco-scrollable-element>.body>.docs {
    margin-right: 24px;
    overflow: hidden
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs {
    padding: 0;
    white-space: initial;
    min-height: calc(1rem + 8px)
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs>div,.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs>span:not(:empty) {
    padding: 4px 5px
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs>div>p:first-child {
    margin-top: 0
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs>div>p:last-child {
    margin-bottom: 0
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs .monaco-tokenized-source {
    white-space: pre
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs .code {
    white-space: pre-wrap;
    word-wrap: break-word
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs .codicon {
    vertical-align: sub
}

.monaco-editor .suggest-details>.monaco-scrollable-element>.body>p:empty {
    display: none
}

.monaco-editor .suggest-details code {
    border-radius: 3px;
    padding: 0 .4em
}

.monaco-editor .suggest-details ul,.monaco-editor .suggest-details ol {
    padding-left: 20px
}

.monaco-editor .suggest-details p code {
    font-family: var(--monaco-monospace-font)
}

.monaco-editor .suggest-preview-additional-widget {
    white-space: nowrap
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
    color: transparent;
    white-space: pre
}

.monaco-editor .suggest-preview-additional-widget .button {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    text-underline-position: under
}

.monaco-editor .ghost-text-hidden {
    opacity: 0;
    font-size: 0
}

.monaco-editor .ghost-text-decoration,.monaco-editor .suggest-preview-text {
    font-style: italic
}

.monaco-editor .inline-completion-text-to-replace,.monaco-editor .detected-link,.monaco-editor .detected-link-active {
    text-decoration: underline;
    text-underline-position: under
}

.monaco-editor .detected-link-active {
    cursor: pointer
}

.monaco-editor .parameter-hints-widget {
    z-index: 39;
    display: flex;
    flex-direction: column;
    line-height: 1.5em;
    cursor: default
}

.monaco-editor .parameter-hints-widget>.phwrapper {
    max-width: 440px;
    display: flex;
    flex-direction: row
}

.monaco-editor .parameter-hints-widget.multiple {
    min-height: 3.3em;
    padding: 0
}

.monaco-editor .parameter-hints-widget.visible {
    transition: left .05s ease-in-out
}

.monaco-editor .parameter-hints-widget p,.monaco-editor .parameter-hints-widget ul {
    margin: 8px 0
}

.monaco-editor .parameter-hints-widget .monaco-scrollable-element,.monaco-editor .parameter-hints-widget .body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 100%
}

.monaco-editor .parameter-hints-widget .signature {
    padding: 4px 5px
}

.monaco-editor .parameter-hints-widget .docs {
    padding: 0 10px 0 5px;
    white-space: pre-wrap
}

.monaco-editor .parameter-hints-widget .docs.empty {
    display: none
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs {
    white-space: initial
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs a:hover {
    cursor: pointer
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs code {
    font-family: var(--monaco-monospace-font)
}

.monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source,.monaco-editor .parameter-hints-widget .docs .code {
    white-space: pre-wrap
}

.monaco-editor .parameter-hints-widget .docs code {
    border-radius: 3px;
    padding: 0 .4em
}

.monaco-editor .parameter-hints-widget .controls {
    display: none;
    flex-direction: column;
    align-items: center;
    min-width: 22px;
    justify-content: flex-end
}

.monaco-editor .parameter-hints-widget.multiple .controls {
    display: flex;
    padding: 0 2px
}

.monaco-editor .parameter-hints-widget.multiple .button {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    cursor: pointer
}

.monaco-editor .parameter-hints-widget .button.previous {
    bottom: 24px
}

.monaco-editor .parameter-hints-widget .overloads {
    text-align: center;
    height: 12px;
    line-height: 12px;
    font-family: var(--monaco-monospace-font)
}

.monaco-editor .parameter-hints-widget .signature .parameter.active {
    font-weight: 700
}

.monaco-editor .parameter-hints-widget .documentation-parameter>.parameter {
    font-weight: 700;
    margin-right: .5em
}

.monaco-editor .rename-box {
    z-index: 100;
    color: inherit
}

.monaco-editor .rename-box.preview {
    padding: 3px 3px 0
}

.monaco-editor .rename-box .rename-input {
    padding: 3px;
    width: calc(100% - 6px)
}

.monaco-editor .rename-box .rename-label {
    display: none;
    opacity: .8
}

.monaco-editor .rename-box.preview .rename-label {
    display: inherit
}

.monaco-editor .unicode-highlight {
    border: 1px solid var(--vscode-editorUnicodeHighlight-border);
    background-color: var(--vscode-editorUnicodeHighlight-background);
    box-sizing: border-box
}

.editor-banner {
    box-sizing: border-box;
    cursor: default;
    width: 100%;
    font-size: 12px;
    display: flex;
    overflow: visible;
    height: 26px;
    background: var(--vscode-banner-background)
}

.editor-banner .icon-container {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0 6px 0 10px
}

.editor-banner .icon-container.custom-icon {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    width: 16px;
    padding: 0;
    margin: 0 6px 0 10px
}

.editor-banner .message-container {
    display: flex;
    align-items: center;
    line-height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.editor-banner .message-container p {
    margin-block-start:0;margin-block-end:0}

.editor-banner .message-actions-container {
    flex-grow: 1;
    flex-shrink: 0;
    line-height: 26px;
    margin: 0 4px
}

.editor-banner .message-actions-container a.monaco-button {
    width: inherit;
    margin: 2px 8px;
    padding: 0 12px
}

.editor-banner .message-actions-container a {
    padding: 3px;
    margin-left: 12px;
    text-decoration: underline
}

.editor-banner .action-container {
    padding: 0 10px 0 6px
}

.editor-banner {
    background-color: var(--vscode-banner-background)
}

.editor-banner,.editor-banner .action-container .codicon,.editor-banner .message-actions-container .monaco-link {
    color: var(--vscode-banner-foreground)
}

.editor-banner .icon-container .codicon {
    color: var(--vscode-banner-iconForeground)
}

.monaco-editor .accessibilityHelpWidget {
    padding: 10px;
    vertical-align: middle;
    overflow: scroll
}

.monaco-editor .iPadShowKeyboard {
    width: 58px;
    min-width: 0;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    resize: none;
    overflow: hidden;
    background: url() center center no-repeat;
    border: 4px solid #F6F6F6;
    border-radius: 4px
}

.monaco-editor.vs-dark .iPadShowKeyboard {
    background: url() center center no-repeat;
    border: 4px solid #252526
}

.monaco-editor .tokens-inspect-widget {
    z-index: 50;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    padding: 10px
}

.tokens-inspect-separator {
    height: 1px;
    border: 0
}

.monaco-editor .tokens-inspect-widget .tm-token {
    font-family: var(--monaco-monospace-font)
}

.monaco-editor .tokens-inspect-widget .tm-token-length {
    font-weight: 400;
    font-size: 60%;
    float: right
}

.monaco-editor .tokens-inspect-widget .tm-metadata-table {
    width: 100%
}

.monaco-editor .tokens-inspect-widget .tm-metadata-value {
    font-family: var(--monaco-monospace-font);
    text-align: right
}

.monaco-editor .tokens-inspect-widget .tm-token-type {
    font-family: var(--monaco-monospace-font)
}
